最近在做一个直播的小程序，前前后后一个月，踩了不少坑，有时间一个一个整理下，方便自己以后查阅。
小程序中设计直播、社区，所以登陆和授权肯定是第一步，万丈高楼平地起，关于登陆小程序官方文档给出了自己的一套流程，文档传送门小程序登陆。
关于登陆
- 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
- 调用 code2Session 接口，换取 用户唯一标识 OpenID 和 会话密钥 session_key。
以上是小程序文档关于登陆的介绍，实际项目中我和后端对接首先将code发动到后台拿到openId, sessionKey, unionId 然后得到后台回传给我的一个memberid记录当前用户编号，然后再讲用户的基本信息传到后台的member表。具体可看如下代码：
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
let code = res.code
ajax.request({
method: "POST",
url: "weixin/getsessionkey",
data: {
code: code
},
success: (res) => {
this.globalData.memberid = res.memberid
wx.setStorageSync("memberid", res.memberid)
if (this.globalData.userInfo === null) {
} else {
let userInfo = this.globalData.userInfo
ajax.request({
method: "POST",
url: "member",
data: {
id: this.globalData.memberid,
nickname: userInfo.nickName,
headimgurl: userInfo.avatarUrl,
city: userInfo.city,
country: userInfo.country,
sex: userInfo.gender
},
success: (res) => {
}
})
}
}
})
}
})
关于授权
以前小程序的授权比较简单，开发者可以使用 wx.authorize 在调用需授权 API 之前，提前向用户发起授权请求。但是后来据说是为了更好的用户体验，让用户主动触发授权申请更优雅一点，于是便出现了现在这个蛋疼的授权体验，我要拿到用户需要用户主动触发，如果多个页面多个地方需要获取用户的昵称或者头像比较蛋疼，都要做判断！！！
好吧，上有政策下有对策，每个都去写判断肯定是不可能的，脑瓜子不行也没有大神的脑回路怎么办呢？找度娘求一卦，于是自己给自己加戏，搞了个welcome页面，用户进来如果没授权就跳到welcome页面，如下图：
点击开始使用弹出授权请求，如果这个用户和你死磕，就是不同意，咋整？小样，想给自己加戏，no，no，no，不可能给你加戏的，于是便出现了如下操作：
用户拒绝授权之后直接强行提示重新授权，好吧！可能用户体验不是很好，但是咱们毕竟是个直播＋社区类型的，你说你头像和昵称都不给我，那咱们怎么愉快的玩耍，是吧？强行给自己找理由，哈哈！！！具体代码实现如下：
//app.js中
// 获取用户信息
wx.getSetting({
success: res => {
// 已经授权
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
if (res.userInfo) {
wx.switchTab({
url: '/pages/live/live',
})
}
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
} else {
// 未授权
wx.reLaunch({
url: '/pages/welcome/welcome',
})
}
}
})
// welecome.wxml中
<view class="welcome">
<image class="logo" src='./images/0.jpg'></image>
<text class="text">{{defaultText}}</text>
<button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfoTap">
{{defaultButton}}
</button>
</view>
//welcome.js中
// 是否授权
getUserInfoTap (event) {
// 点击同意
if (event.detail.userInfo) {
app.globalData.userInfo = event.detail.userInfo
let userInfo = app.globalData.userInfo
let memberid = app.globalData.memberid
ajax.request({
method: "POST",
url: "member",
data: {
id: memberid,
nickname: userInfo.nickName,
headimgurl: userInfo.avatarUrl,
city: userInfo.city,
country: userInfo.country,
sex: userInfo.gender
},
success: (res) => {
console.log(res)
}
})
wx.reLaunch({
url: '/pages/live/live',
})
} else {
this.setData({
defaultText: '为保证您的正常使用,请进行授权!',
defaultButton: '重新授权'
})
}
}
上面两端代码即可解决新版小程序中的授权问题，不过在跳到live主页中时，可能由于异步请求的原因，memberid并没有第一时间更新，这里有一个小小的坑，就是让memberid在wx.login中用wx.setStorageSync("memberid", res.memberid)存一次，然后在首页onLoad的时候去读取wx.getStorageSync("memberid")就好了。
当然相对来说用户体验可能不如以前好，如果有大神有更好的办法，欢迎留言，如有错误，欢迎指正！！！
网友评论