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

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

getUserInfo 调整

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

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

1
2
3
4
5
<button class="go_to_member" bindgetuserinfo="goMember" open-type="getUserInfo">
<view class="go_cart_member">
会员信息
</view>
</button>


wx.login

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 字段

1
2
3
4
5
6
// app.js 全局Data
globalData: {
userInfo: null,
domain_name: 'https://xxx.com', // 线上
Token: '',
},



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

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


showLoading

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 开始调用 showLoading
wx.showLoading({
title: '加载中...',
})

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


例子


loadingGIF 解决页面抖动

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

1
2
3
4
5
6
7
<view class="waiting_img" wx:if="{{ code !== 0 }}">
<image src="/pages/img/waiting.gif"></image>
</view>

<view class="wrapper" wx:if="{{ code === 0 }}">
页面内容
</view>
1
2
3
4
5
6
7
8
9
10
11
// 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() 即可。

本文结束  感谢您的阅读
0%