這篇文章主要介紹了微信小程序如何通過用戶授權獲取手機號(getPhoneNumber),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
小程序有一個獲取用戶很便捷的api,就是通過getPhoneNumber獲取用戶的已經綁定微信的手機號碼。有一點要大家注意,現在微信和注重用戶體驗,有些方法都是需要用戶主動去觸發才能調用的,比如getPhoneNumber。
官方文檔:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
實現思路:

直接上干貨:
1、
|
1
|
<
button
open-type
=
"getPhoneNumber"
bindgetphonenumber
=
"getPhoneNumber"
></
button
>
|
2、JS內getPhoneNumbe組件函數(該事件中最重要的就是在wx.login登錄后發起接口請求),這里需要配置參數來給接口:
這些是必不可少的參數,這些齊備才能算一個合法的請求。
|
1
2
3
4
5
|
appid: “你的小程序APPID”,
secret: “你的小程序appsecret”,
code: res.code,
encryptedData: telObj,
iv: ivObj
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
//通過綁定手機號登錄
getPhoneNumber:
function
(e) {
var
ivObj = e.detail.iv
var
telObj = e.detail.encryptedData
var
codeObj =
""
;
var
that =
this
;
//------執行Login---------
wx.login({
success: res => {
console.log(
'code轉換'
, res.code);
//用code傳給服務器調換session_key
wx.request({
data: {
appid:
"你的小程序APPID"
,
secret:
"你的小程序appsecret"
,
code: res.code,
encryptedData: telObj,
iv: ivObj
},
success:
function
(res) {
phoneObj = res.data.phoneNumber;
console.log(
"手機號="
, phoneObj)
wx.setStorage({
//存儲數據並准備發送給下一頁使用
key:
"phoneObj"
,
data: res.data.phoneNumber,
})
}
})
//-----------------是否授權,授權通過進入主頁面,授權拒絕則停留在登陸界面
if
(e.detail.errMsg ==
'getPhoneNumber:user deny'
) {
//用戶點擊拒絕
wx.navigateTo({
url:
'../index/index'
,
})
}
else
{
//允許授權執行跳轉
wx.navigateTo({
url:
'../test/test'
,
})
}
}
});
},
|
最終結果展示:

點擊"拒絕",開發者能捕捉到該事件 ,此時getPhoneNumber 函數返回 e.detail.errMsg 為 getPhoneNumber:user deny
