微信小程序开发心得
1、wx.request异步请求
微信小程序 wx.request请求并非单纯的JS异步请求,所以说并不是跨域请求,而是微信SDK封装的服务端针对服务端的请求
注意:小程序开发服务端接口必须使用https协议
2、navigator不跳转问题
如果navigator的url地址在app.json的tarbar的list数组中配置了,navigator跳转就会失效
3、小程序自定义组件属性赋值问题
小程序中的自定义组件如果要自定义组件属性需要使用data-开头,通过e.currentTarget.dataset.可以取到相应属性的值,否则js文件取不到该属性的值,例如:
<view class='select_btns'> <button type="default" data-gametype="{{item.game_type}}" data-gameid='{{item.game_id}}' data-gamename='{{item.game_name}}' bindtap='changeState' id="{{item.id}}" size="" class="{{projectId==item.id?'current_selected':''}}" hover-class="other-button-hover" wx:for="{{detailMatch.apply_games}}" wx:key="{{item.id}}"> {{item.game_name}} </button> </view>
相关JS文件获取data-gametype值可以通过 e.currentTarget.dataset.gametype
4、小程序因异步无法取到值的问题
解决办法:1、使用回调函数
2、使用promise(个人理解为回调的封装)
promise的精髓所在就是其then函数的链式调用,其作用就是将异步操作以同步操作的方式表达,在某个操作结束之后再执行then的函数,理论知识可以自行参考相关书籍(ES6提供),例子如下:
第1步:app.js异步请求设置全局昵称,由于请求是异步的,所以其他页面(user.js)在使用昵称时有可能出现全局变量还没有设置值
setLocalInfo: function (code) { var self = this; var promise = new Promise((resolve, reject) => { // 发送 res.code 到后台换取 openId, sessionKey, unionId //console.log(res.code); // 发送 res.code 到后台换取 openId, sessionKey, unionId //请求开发者服务器获取登录验证 wx.request({ url: "https://es.cga.com.cn/weapp/user/wxlogin", data: { code: code }, method: 'GET', success: function (result) { //请求成功返回结果 if (result.data.errno == "0") { wx.setStorageSync("es_sign", encodeURI(result.data.data["c_sign"]).replace(/\+/g, '%2B')); self.globalData.user_nick = result.data.data["user_nick"]; wx.setStorageSync("user_nick", self.globalData.user_nick); resolve(result.data.data["user_nick"]); } } }); }) return promise; }
第2步:用户信息页调用setLocalInfo函数
app.setLocalInfo(data).then(function (res) {})
说明:1、setLocalInfo函数必须返回一个promise对象,promise可以传入两个参数(resolve、reject),resolve为异步调用成功执行函数,reject为异步调用失败执行函数
2、resolve(data)执行会将data传递给调用的then函数,就是then的res
3、借鉴文章:https://segmentfault.com/a/1190000007678185
5、tabbar中的链接必须定义在app.json的pages里
6、小程序生命周期,待续...