溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了微信小程序開發如何獲取用戶手機號碼，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
后邊要做一個微信小程序，并要能獲取用戶微信綁定的手機號碼。而小程序開發文檔上邊提供的獲取手機號碼的接口（getPhoneNumber()）返回的是密文，需要服務器端進行解密，但是官方提供的開發文檔一如既往的亂，如果沒有對小程序開發文檔有一個整體的了解，搞懂解密流程還是有點難的。這里把小程序從請求用戶授權獲取手機號碼直至獲取到手機號碼明文的整個流程串了起來，方便迅速了解,如下：
一. 前端相關操作：
1. 請求用戶授權獲取手機號碼:
因為需要用戶主動觸發才能發起獲取手機號接口，所以該功能不由 API 來調用，需用<button>組件的點擊來觸發，如下：
wxml:
<button wx:if="{{!phone}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> 獲取手機號碼</button>js:
Page({
getPhoneNumber: function(e) {
if(e.detail.errMsg == "getPhoneNumber:fail user deny") return; //用戶允許授權
console.log("lv", e.detail.iv); //包括敏感數據在內的完整用戶信息的加密數據,需要解密
console.log(e.detail.encryptedData); //加密算法的初始向量，解密需要用到
......
}
})2. 訪問小程序登錄接口:
小程序調用wx.login()獲取臨時登錄憑證code,并傳到開發者服務器。
Page({
getPhoneNumber: function(e) {
console.log(e.detail.errMsg)
console.log(e.detail.iv) //包括敏感數據在內的完整用戶信息的加密數據,需要解密
console.log(e.detail.encryptedData) //加密算法的初始向量，解密需要用到
wx.login({
success: res => {
if(res.code){
console.log(res.code)
}
}
})
}
})3. 訪問騰訊服務器的登錄憑證校驗接口:
注：官方推薦放到服務器端進行，這里為了方便，就放在前端請求了。
這里要注意傳入參數：
| appid | 小程序唯一標識 | |
| secret | 小程序的 app secret | |
| js_code | 登錄時獲取的 code | |
| grant_type | 填寫為 authorization_code |
//2. 訪問登錄憑證校驗接口獲取session_key
wx.request({
url: "https://api.weixin.qq.com/sns/jscode2session",
data: {
'appid': "xxxxxxxx",
'secret': "xxxxxxxx",
'js_code': res.code,
'grant_type': "authorization_code"
},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'content-type': 'application/json'
}, // 設置請求的 header
success: function(data) {
console.log("data", data.data.session_key)
},
fail: function(err) {
console.log(err);
}
})4. 自己的服務器端進行解密
注：解密接口可以使用騰訊官方的demo進行改造，具體改造會在后面說明。
//3. 解密
wx.request({
url: 'http://xxxxx.com/demo/demo.php',//騰訊官方demo改造的接口頁面
data: {
'encryptedData': encodeURIComponent(e.detail.encryptedData),//需要進行編碼
'iv': e.detail.iv,
'session_key': data.data.session_key
},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'content-type': 'application/json'
}, // 設置請求的 header
success: function(data2) {
console.log(data2.data.phoneNumber)
if(data2.statusCode == 200) {
self.setData({
phone: data2.data.phoneNumber
})
}
},
fail: function(err) {
console.log(err);
}
})js部分整體代碼如下：
getPhoneNumber: function (e) {
if (e.detail.errMsg == "getPhoneNumber:fail user deny") return;
//用戶允許授權
console.log("lv", e.detail.iv);
console.log(e.detail.encryptedData);
wx.showLoading()
var self=this
//1. 調用登錄接口獲取臨時登錄code
wx.login({
success: res => {
if(res.code){
//2. 訪問登錄憑證校驗接口獲取session_key、openid
wx.request({
url: "https://api.weixin.qq.com/sns/jscode2session",
data: {
'appid': "wxcc41e47562b08129",
'secret': "50e4379d67a6860d18157c53dc6ac3c2",
'js_code': res.code,
'grant_type': "authorization_code"
},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'content-type': 'application/json'
}, // 設置請求的 header
success: function (data) {
console.log("data", data)
if(data.statusCode==200){
//3. 解密
wx.request({
url: 'http://qdy8.gotoip4.com/demo/demo.php',
data: {
'encryptedData': e.detail.encryptedData,
'iv': e.detail.iv,
'session_key': data.data.session_key
},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'content-type': 'application/json'
}, // 設置請求的 header
success: function (data2) {
wx.hideLoading()
console.log(data2.data.phoneNumber)
if (data2.statusCode == 200 && data2.data.phoneNumber) {
self.setData({
phone: data2.data.phoneNumber
})
}
},
fail: function (err) {
console.log(err);
}
})
}
},
fail: function (err) {
console.log(err);
}
})
}
}
})
}二. 后端接口：
微信官方提供了多種編程語言的示例代碼（示例代碼）。每種語言類型的接口名字均一致，調用方式可以參照示例。
如果只是學習研究，可以買個經濟型的虛擬主機，一年才幾十塊錢，不過這種虛擬主機以php居多，所以這里以php為例進行改造，接收前端請求。
官方demo下載后結構如下：
對demo.php進行改造：
<?php
include_once "wxBizDataCrypt.php";
/**
* sessionKey/encryptedData/iv參數均從url中獲取，并賦給相應變量
*/
$appid = 'xxxxxxxx';
$sessionKey = $_REQUEST['session_key'];
$encryptedData=$_REQUEST['encryptedData'];
$iv = $_REQUEST['iv'];
$pc = new WXBizDataCrypt($appid, $sessionKey);
$errCode = $pc->decryptData($encryptedData, $iv, $data );
if ($errCode == 0) {
print($data . "\n");
} else {
print($errCode . "\n");
}
?>將php的三個demo文件上傳虛擬主機：
然后就可以直接訪問demo.php文件作為接口了。
三. 容易出現的異常：
1. 訪問微信的登錄憑證校驗接口獲取session_key時，如果報出如下錯誤，則需清除全部緩存，重新編譯（應該是更改過appid，開發工具的坑，不清除全部緩存，會出現這個錯誤）：
invalid code, hints: [ req_id: CPAsWa0325ha57 ]
2.解密接口返回-41003,則檢查接口參數:
看完上述內容，是不是對微信小程序開發如何獲取用戶手機號碼有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
