微信小程序獲取手機(jī)號(hào)授權(quán)是常用的小程序開(kāi)放能力之一,對(duì)小程序制作開(kāi)發(fā)人員來(lái)說(shuō)怎么實(shí)現(xiàn)該功能呢?
要想獲取微信用戶(hù)綁定的手機(jī)號(hào),需要先調(diào)用wx.login接口。而且因?yàn)樾枰脩?hù)主動(dòng)觸發(fā)才能發(fā)起獲取手機(jī)號(hào)接口,所以該功能不由API來(lái)調(diào)用,需用button組件的點(diǎn)擊來(lái)觸發(fā)。
使用方法:
將button組件open-type的值設(shè)置為getPhoneNumber,當(dāng)用戶(hù)點(diǎn)擊并同意之后,可以通過(guò) bindgetphonenumber 事件回調(diào)獲取到微信服務(wù)器返回的加密數(shù)據(jù), 然后在第三方服務(wù)端結(jié)合 session_key 以及 app_id 進(jìn)行解密獲取手機(jī)號(hào)。
注意事項(xiàng):
在回調(diào)中調(diào)用 wx.login 登錄,可能會(huì)刷新登錄態(tài)。此時(shí)服務(wù)器使用 code 換取的 sessionKey 不是加密時(shí)使用的 sessionKey,導(dǎo)致解密失敗。建議開(kāi)發(fā)者提前進(jìn)行 login;或者在回調(diào)中先使用 checkSession 進(jìn)行登錄態(tài)檢查,避免 login 刷新登錄態(tài)。
代碼示例如下:
<button open-type=”getPhoneNumber” bindgetphonenumber=”getPhoneNumber”></button>
JS內(nèi)getPhoneNumbe組件函數(shù)(該事件中最重要的就是在wx.login登錄后發(fā)起接口請(qǐng)求),這里需要配置參數(shù)來(lái)給接口:
這些是必不可少的參數(shù),這些齊備才能算一個(gè)合法的請(qǐng)求。
appid: “你的小程序APPID”,
secret: “你的小程序appsecret”,
code: res.code,
encryptedData: telObj,
iv: ivObj
//通過(guò)綁定手機(jī)號(hào)登錄
getPhoneNumber: function (e) {
var ivObj = e.detail.iv
var telObj = e.detail.encryptedData
var codeObj = “”;
var that = this;
//——執(zhí)行Login———
wx.login({
success: res => {
console.log(‘code轉(zhuǎn)換’, res.code);
//用code傳給服務(wù)器調(diào)換session_key
wx.request({
url: ‘https://你的接口文件路徑’, //接口地址
data: {
appid: “你的小程序APPID”,
secret: “你的小程序appsecret”,
code: res.code,
encryptedData: telObj,
iv: ivObj
},
success: function (res) {
phoneObj = res.data.phoneNumber;
console.log(“手機(jī)號(hào)=”, phoneObj)
wx.setStorage({ //存儲(chǔ)數(shù)據(jù)并準(zhǔn)備發(fā)送給下一頁(yè)使用
key: “phoneObj”,
data: res.data.phoneNumber,
})
}
})
//—————–是否授權(quán),授權(quán)通過(guò)進(jìn)入主頁(yè)面,授權(quán)拒絕則停留在登陸界面
if (e.detail.errMsg == ‘getPhoneNumber:user deny’) { //用戶(hù)點(diǎn)擊拒絕
wx.navigateTo({
url: ‘../index/index’,
})
} else { //允許授權(quán)執(zhí)行跳轉(zhuǎn)
wx.navigateTo({
url: ‘../test/test’,
})
}
}
});
},
得到的最終效果展示:
以上就是微信小程序獲取手機(jī)號(hào)授權(quán)怎么實(shí)現(xiàn)的具體步驟,具體參考官方文檔:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html