和同学合作开发一款商用的微信小程序。之前并没有熟悉前端,js也只是了解。属于边开发边了解(菜鸟行为,不值得学习,磨刀不误砍柴工)对遇到的部分问题做出以下总结:
一。使用 Promise 封装 wx.request
封装的好处是:维护方便,在业务代码里只关注业务,而不用去关注请求的本身。接口修改方便,减少错误和冗余代码。
代码如下 /wxapi/main.js
const request = (url, needSubDomain, method, data) => {
let _url = API_BASE_URL + (needSubDomain ? '/' + CONFIG.subDomain : '') + url
return new Promise((resolve, reject) => {
wx.request({
url: _url,
method: method,
data: data,
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success(request) {
resolve(request.data)
},
fail(error) {
reject(error)
},
complete(aaa) {
// 加载完成
}
})
})
}
/**
* 小程序的promise没有finally方法,自己扩展下
*/
Promise.prototype.finally = function (callback) {
var Promise = this.constructor;
return this.then(
function (value) {
Promise.resolve(callback()).then(
function () {
return value;
}
);
},
function (reason) {
Promise.resolve(callback()).then(
function () {
throw reason;
}
);
}
);
}
module.exports = {
request
noticeList: (data) => {
return request('/notice/list', true, 'post', data)
},
}
const WXAPI = require('../../wxapi/main')
(只展示获取公告的部分代码)
getNotice: function() { var that = this; WXAPI.noticeList({pageSize: 5}).then(function (res) { if (res.code == 0) { that.setData({ noticeList: res.data }); } }) },
二。.wx.request异步问题
两处地方因为这个问题想了好久,订单的提交,我js的业务流程是请求返回用户购买的商品实时库存量,进行if判断能否下单,而此时的库存量一直是0(初始值)。通过调试发现if先执行而后执行wx.request,通过查阅开发者文档得以更深刻了解。第二次是用户通过分享二维码或者转发进入小程序(由于小程序取消自动弹出授权,我改成了button,必须点击才能授权),我的做法是判断是否有用户id,没有给出提示然后强制跳转登录页面,而此时登进去后校区信息没有了(校区的请求写在app.js,校区信息作为全局变量在使用)。这个问题也折腾了一会儿,后来意识到,转发的首页已经渲染了,校区请求是后执行,这也是异步的问题。
三.团队协作
既然选择了团队合作,就需要注意一些问题,例如命名规范,合理使用GitHub,写好api接口文档,理性沟通等等,尽量少给对方制造麻烦。