微信小程序开发心得

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、小程序生命周期，待续...

微信小程序开发心得

猜你喜欢