上一章节我们学习了小程序登录的部分流程，今天我们继续来把登录流程完善。
小程序客户端将获取到的微信用户绑定的手机号传给后端，返回给小程序客户端自定义登录状态 token。
获取手机号
获取微信用户绑定的手机号，需先调用wx.login接口。
请注意：
需要用户主动触发才可以发起获取手机号接口，所以我们需要 button 组件的帮助。
button 组件
按钮，为表单组件。
常用属性：
open-type微信开放能力，值为字符串。getPhoneNumber获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息。getUserInfo获取用户信息，可以从bindgetuserinfo回调中获取到用户信息share触发用户转发
bindgetphonenumber获取用户手机号回调bindgetuserinfo用户点击该按钮时，会返回获取到的用户信息
上面的属性一定要了解，这些我们后面全都会用到的。
使用方法
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>将 button 组件 open-type 的值设置为 getPhoneNumber
当用户点击同意之后，我们就可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据，然后我们将加密数据返回给后端，让后端去进行解密获取手机号。
注意
在回调中调用 wx.login登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
bindgetphonenumber()回调函数
getPhoneNumber (e) {
console.log(e.detail.errMsg)
console.log(e.detail.iv)
console.log(e.detail.encryptedData)
}
encryptedData包括敏感数据在内的完整用户信息的加密数据iv加密算法的初始向量
这些都是要传给后台的数据。
代码详解
部分 personal.wxml
<view class="nick-name">
<blcok wx:if="{{token == '' && is_fill_info == false}}">
点击登录
</blcok>
<blcok wx:if="{{token && is_fill_info == false}}">
点击授权头像昵称
</blcok>
<block wx:if="{{token && is_fill_info == true}}">
@黔在在
</block>
</view>
<!-- 手机号登录-->
<button class="phone_number_button" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" wx:if="{{token == '' && is_fill_info == false}}"></button>部分 personal.js
data:{
open_id:'',
token:'',
is_fill_info:false,
code:'',
unionId:""
},
onShow(){
let token = wx.getStorageSync('user_token');
if(token){
this.setData({
token:token
})
} else {
this.wxLogin()
}
},
//手机回调
getPhoneNumber(e){
//encryptedData: 包括敏感数据在内的完整用户信息的加密数据
//iv : 加密算法的初始向量
if(e.detail.encryptedData){
wx.login({
success: res => {
if (res.code) {
this.setData({
code: res.code
}, res => {
this.phone(e);
})
} else {
wx.showModal({
content: " 获取code失败",
showCancel: false
})
}
}
});
}
},
//传给后端去解密
phone(e){
wx.showLoading({
title: '正在登录',
mask: true
})
//传给后端的参数
sandBox.post({
api:'api/sir/user/wechat/login',
data:{
code:this.data.code,
encryptedData: e.detail.encryptedData,
iv: e.detail.iv,
openId: this.data.open_id,
unionId:this.data.unionId
}
}).then(res=>{
res= res.data;
if(res.status){
if(res.data && res.data.access_token){
//将拿到的token，做一下处理，客户端跟服务端协调一致
let access_token = res.data.token_type + ' ' + res.data.access_token;
//将token存在本地
wx.setStorageSync('user_token', access_token);
this.setData({
token:access_token
})
}
} else {
wx.hideLoading()
wx.showModal({
content: res.message || '请求失败，请重试',
showCancel: false
})
}
wx.hideLoading()
}).catch(rej=>{
wx.hideLoading()
wx.showModal({
content: rej.message || '请求失败，请重试',
showCancel: false
})
})
}
然后我们的页面就变成下面这个样子了。
还需要用户去授权头像昵称。
大家肯定有疑问，wx:if 是什么？别着急，在下一章节会跟大家详细讲解。
总结
- button 组件
- 授权用户手机号
- getPhoneNumber() 回调函数
至此小程序登录的功能我们就学习完成了，所以下一章节我们讲解何为 wx.if 条件渲染跟如何拿到用户的头像昵称。
本文由博客群发一文多发等运营工具平台 OpenWrite 发布
