1.打开微信开发者工具,选择新建项目,填写项目名称,选择目录,填写APPID,其他默认,点击新建。创建完成后,删除
默认页面,app.json页面下的pages里内容清空。
2.重构app.json文件
{
"pages": [
"pages/home/home",
"pages/cates/cates",
"pages/search/search",
"pages/cart/cart",
"pages/my/my",
"pages/goods_detail/index",
"pages/goods_list/index",
"pages/confirm/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#f44",
"navigationBarTitleText": "黑马优购",
"navigationBarTextStyle": "white"
},
"tabBar": {
"selectedColor": "#f44",
"list": [
{
"text": "首页",
"pagePath": "pages/home/home",
"iconPath": "/assets/icons/home.png",
"selectedIconPath": "/assets/icons/home-active.png"
},
{
"text": "分类",
"pagePath": "pages/cates/cates",
"iconPath": "/assets/icons/cates.png",
"selectedIconPath": "/assets/icons/cates-active.png"
},
{
"text": "搜索",
"pagePath": "pages/search/search",
"iconPath": "/assets/icons/search.png",
"selectedIconPath": "/assets/icons/search-active.png"
},
{
"text": "购物车",
"pagePath": "pages/cart/cart",
"iconPath": "/assets/icons/cart.png",
"selectedIconPath": "/assets/icons/cart-active.png"
},
{
"text": "我的",
"pagePath": "pages/my/my",
"iconPath": "/assets/icons/my.png",
"selectedIconPath": "/assets/icons/my-active.png"
}
]
},
"style": "v2",
"usingComponents": {
"stepper": "/components/stepper/index",
"slide-delete": "/components/slide-delete/index"
},
"debug": true,
"sitemapLocation": "sitemap.json"
}
3.重构App.js 封装Promise 使以后发起数据请求更加简单
App({
globalData: {
sysInfo: {}
},
async onLaunch() {
this._promisifyWxApi()
},
_promisifyWxApi() {
const that = this
wx.requestAsync = function(params={}) {
let {url, method, data, header, hideLoading} = params
// 统一添加一个接口发起的渠道标识
data = {
...data,
channel: 'miniapp'
}
// 统一过滤参数中值为undefined和null的参数
const formatParams = {}
for(let prop in data) {
if (data[prop] !== undefined && data[prop] !== null) {
formatParams[prop] = data[prop]
}
}
if (!hideLoading) {
wx.showLoading({
title: '正在获取数据...'
})
}
return new Promise((resolve, reject) => {
wx.request({
url: 'https://uinav.com/api/public/v1/' + url,
// url: 'https://www.zhengzhicheng.cn/api/public/v1/' + url,
method: method || 'GET',
data: formatParams,
header: {
...header,
'Authorization': that.globalData.token
},
success: res => {
// 1. 网络正常
if (res && +res.statusCode === 200) {
// 业务逻辑正确
if (res.data && res.data.meta) {
if(+res.data.meta.status === 200) {
resolve(res.data.message)
}
// 404
else if (+res.data.meta.status == 404) {
wx.showToast({
title: '接口路径不存在',
icon: 'none'
})
reject(res)
}
// 400 404 401 10000
else {
reject(res)
}
}
else {
reject(res)
}
}
// 2. 网络不正常
else {
reject(res)
}
},
fail: err => {
reject(err)
},
complete: () => {
if (!hideLoading) {
wx.hideLoading()
}
}
})
})
}
})
5.页面发起数据请求
const app = getApp()
onLoad(options) {
this._fetchData({
path: 'home/swiperdata',
type: 'swiperData'
})
this._fetchData({
path: 'home/catitems',
type: 'cates'
})
}
async _fetchData(params={}) {
const {path, type} = params
try {
let ret = await wx.requestAsync({
url: path,
})
this.setData({
[type]: ret
})
}
catch(err) {
console.log('catch err: ', err)
}
}
})
单一的数据接口
onLoad(options) {
this._fetchData()
},
async _fetchData() {
try {
let cates = await wx.requestAsync({
url: 'categories'
})
// 1. ReferenceError: 使用一个未定义的变量
// 2. TypeError:
// throw new Error('aaa')
this.setData({
cates,
winHeight: app.globalData.sysInfo.windowHeight
})
}
catch(err) {
console.log('err: ', err)
this.setData({errMsg: '获取分类数据失败'})
}
},