微信小程序获取微信绑定手机号
效果图
获取微信绑定手机号,更换手机号可以点下方“管理手机号码”,微信会给更换的手机号发送验证码进行验证,验证通过就可以正常获取。不用自己去配置短信验证手机号的正确性,用的是微信的短信服务。
json
用的WxUI,如何引入就不多说了,网上一搜一大堆
{
“usingComponents”: {
“mp-cells”: “…/…/…/miniprogram_npm/weui-miniprogram/cells/cells”,
“mp-cell”: “…/…/…/miniprogram_npm/weui-miniprogram/cell/cell”
}
}
wxml
<mp-cells ext-class="my-cells cells">
<mp-cell title="手机号:">
<input bindinput="formInputChange" data-field="iphone" value="{{formData.iphone}}" disabled class="weui-input" placeholder="请选择您的手机号码" />
<button slot="footer" style='font-size:26rpx;width: 176rpx;' class="iphone-button" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
</mp-cell>
</mp-cells>
点button调用方法,弹获取手机号弹窗
js
就一个方法
//微信授权 获取用户手机号
getPhoneNumber: function (e) {
let t = wx.getStorageSync("WxAppToken");
let token =JSON.parse(base64_decode(t.split(".")[0])).UserInfo;
let session_key = token.session_key;
var that = this;
var msg = e.detail.errMsg;
//拿到信息 传给后台通过解密获取用户手机号
var encryptedDataStr = e.detail.encryptedData, // 包括敏感数据在内的完整用户信息的加密数据
iv = e.detail.iv; // 加密算法的初始向量
if(msg = 'getPhoneNumber:ok'){
wx.checkSession({
success:function(){
wx.showLoading({
title: "授权中...",
mask: true
})
if(!encryptedDataStr || !iv){
wx.showToast({
title: '信息授权失败!',
icon: "none"
})
return
}
app.axios.$post(app.globalData.Base + "/xxx/xxx", {
encryptedData: encryptedDataStr,
sessionKey:session_key,
iv: iv
}).then((res) => {
wx.hideLoading();
if (res.flag) {
that.setData({
['formData.iphone']:res.data.phoneNumber
})
}
})
},
})
}
},
请求方法前要先拿到session_key,具体方式根据情况自己定;
encryptedDataStr:这个是包括敏感数据在内的完整用户信息的加密数据;
iv:加密算法的初始向量;
这三个参数拿到后就可以传给后台,让后台去解密拿到的参数,具体解密参数可以参考微信官方文档。
链接: 传送门.