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

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() 即可。

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://www.dengtar.com/11947.html