值得记录的 （四）- 小程序开发中遇到的一些要点

最近在做商城小程序的会员中心模块项目。之前除了制作过简单的翻译小程序之外几乎没有做过小程序开发，开发的过程也是一个学习的过程，记录一些在开发工程中值得记录的。

getUserInfo 调整

调用前需要 用户授权 scope.userInfo。

这个 API 在进行修改之后，只能够通过用户点击来触发，因此在一个普通元素（view或者 image）上进行 bindtap 事件绑定是不可以调用 userinfo的。至少截止到这篇文章发表之时，凡是接口需要获取 userinfo 必须用 button 来触发获取，只有做成一个 button 让用户点击，才能够获取到 userinfo。格式为：

<button class="go_to_member" bindgetuserinfo='goMember' open-type="getUserInfo">
  <view class="go_cart_member">
      会员信息
  </view>
</button>

wx.login

如果接口的请求需要传递 code 。那么 request 请求（ajax）要在 wx.login 中嵌套进行。

wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://test.com/onLogin',
        data: {
          code: res.code  // 后端需要的值
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

Token 传值

app.js 存放 Token 为空，获取到 Token 之后存储到全局 globalData 中。然后在跳转到下一个页面，下一个页面请求接口的 url 地址会加上这个 Token 字段

// app.js 全局Data
globalData: {
  userInfo: null,
  domain_name: 'https://xxx.com', // 线上
  Token: '',
},

当前页跳转，并存储 app.globalData.Token。

<>
下一页接口请求地址带上 app.globalData.Token 。

showLoading

由于一些页面模块之间的跳转并不是单纯的本地 page 跳转，为了让用户没有使用卡顿的直接感觉，另一方面解除用户的等待焦虑心理，使用 showLoading 告知用户正在加载。

// 开始调用 showLoading
wx.showLoading({
  title: '加载中...',
})

// 请求结束后 用 complete 调用 hideLoading
wx.request({
  url: ...,
  ...,
  success: (res) => {
  },
  fail: () => {},
  complete: () => {
    wx.hideLoading()
  }
})

例子

loadingGIF 解决页面抖动

如果前后页面是使用 navigator 标签跳转，进页面之后再使用 onLoad 进行请求渲染的情况。可能会造成用户进入页面时，发生页面突然刷新或者页面渲染抖动的情况出现。这里我们可以搭配 wx:if 和 loadingGIF 来实现一个顶部的 loading 旋转图标，在加载完成，返回 code === 0 的时候才给用户看再一次性渲染成功的页面，消除抖动感。当然这里如果更加节约资源，可以使用 iconfont 或者 svg 搭配 @keyframe CSS 动画去代替 loadingGIF。

<view class="waiting_img" wx:if="{{ code !== 0 }}">
  <image src="/pages/img/waiting.gif"></image>
</view>

<view class="wrapper" wx:if="{{ code === 0 }}">
  页面内容
</view>

// app.wxss
.waiting_img {
    width: 100%;
    text-align: center;
}

.waiting_img image {
    width: 31px !important;
    height: 31px !important;
    margin-top: 30rpx;
}

小程序生命周期 this 搭桥

在 onLoad 生命周期钩子里面进行获取数据并渲染出现了 Cannot read property 'setData' of null 的报错。

该报错是由于小程序生命周期钩子中 this 改变指向导致的，var that = this 之后将 that 用于 setData() 即可。