在看微信小程序开发文档的时候看到很好有意思的内容,内容如下:
获取手机号
获取微信用户绑定的手机号,需先调用wx.login接口。
因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 button 组件的点击来触发。
使用方法
需要将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据, 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。
注意*
在回调中调用 wx.login 登录,可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey,导致解密失败。建议开发者提前进行 login;或者在回调中先使用 checkSession 进行登录态检查,避免 login 刷新登录态。
解析
这意思就是想获取微信的手机号码你仅仅只能绑定一个button,然后通过button的open-type来获取用户点击了获取手机号按钮的回调,但是前提你还要调用wx.login接口,否则再次调用可能会出现刷新的问题,综上所述发现在获取手机号的时候是一件麻烦的事情,再次查询,发现wx.login接口返回的code中有效时间在5分钟内,所以思想是进入界面后就调用wx.login然后设置一个定时,如果超过5分钟用户未点击获取手机号按钮则定时器再一次启动,自动调用wx.login接口,获取最新的code以防code过期。
实现
微信登录接口
/*
* 微信登录接口
* */
wxLoginRequest: function () {
let that = this;
wx.login({
success(res) {
if (res.code) {
console.log('wx.login接口返回的code: '+ res.code);
that.data.code = res.code;
}
}
});
},
定时器的实现:
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.wxLoginRequest();
let that = this;
/*给个定时器,每次间隔一定的时间更新一次code以防数据出现问题,手机号获取失败问题*/
this.interval = setInterval(function () {
// console.log('测试间隔5秒调用一次!');
that.wxLoginRequest();
}, 240000 );// 4分钟调用一次
},
注意:
定时器要移除操作,否则定时一直工作,移除代码如下:
/*
* 取消此界面的定时器
* */
clearInterval: function () {
//console.log('取消此界面的定时器');
if (this.interval) {
clearInterval(this.interval);
this.interval = null;
}
},
在请求成功、失败、页面消失的时候都应该结束定时器,以防出现定时器反复请求的问题。
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
this.clearInterval();
},
wxml布局
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
index.js回调:
/*
* 获取用户加密手机信息
* */
getPhoneNumber: function (mobileData) {
if (mobileData.detail.errMsg === 'getPhoneNumber:ok' ){
let parms = {
iv: mobileData.detail.iv,
encryptedData: mobileData.detail.encryptedData,
code: this.data.code,
appkey:'yytbuyer'
};
// console.log('数据: '+JSON.stringify(parms));
wx_login(parms).then(async res => {
if (res?.success) {
// console.log('登录返回的数据: '+res?.success);
this.clearInterval();
console.log('--登录成功,做登录的事情。');
} else {
console.log('--登录失败!');
this.wxLoginRequest();
}
}).catch(e => {
console.log('--登录失败!');
this.wxLoginRequest();
});
}else {
this.wxLoginRequest();
console.log('用户未授权!');
}
},
注意--说明:
有关手机号解密的问题,是服务端处理的解密逻辑,解密时需要服务端配合使用 AppID(小程序ID):和 AppSecret(小程序密钥): 这里的两个密钥要提供给服务端,服务端在根据解密规则去解密手机号就可以了。