小程序如何獲取用戶手機號碼？下面本篇文章給大家介紹一下微信小程序開發中獲取用戶手機號碼的方法，希望對大家有所幫助！
1、背景
在平時使用第三方微信小程序時，經常會有需要獲取微信手機號碼的情況，如下圖所示：
那這種是怎樣實現的呢？下面記錄下獲取微信手機號碼的方法。
**備注：**需要有一個微信小程序號，并且這個號是經過企業認證的。（獲取手機號碼的功能不對個人小程序號生效）
那下面我們就一起開始，獲取手機號碼的編程之旅了。
2、代碼實現
2.1 新建工程
在app.json文件中新增 "pages/getphonenumber/getphonenumber", 如下圖所示：
2.2 準備密文解析工具類
通過微信小程序提供的接口獲取手機號碼，返回的數據是加密的，所以需要對返回的加密數據進行解密。
1) 新建終端
在微信開發者工具中，點擊 "終端" -》 “新建終端” 如下圖所示：
2) 執行 npm init 指令
//執行npm init后需要你輸入一些信息，直接一直點擊 “回車”鍵就好
如下圖所示：
3) 依次執行 npm install crypto-js --save 、 npm install js-base64 --save
如下圖所示:
4）構建npm
在微信開發工具的菜單欄 選擇 “工具” -》 “構建npm” 構建完成即可。
2.3 解析類實現
在工程的utils文件夾下新建 WXBizDataCrypt.js文件，代碼實現如下所示：
var CryptoJS = require("crypto-js");
var Base64 = require("js-base64");
//解析加密數據
function decode(sesionKey,iv,data) {
var key = CryptoJS.enc.Base64.parse(sesionKey);
var iv = CryptoJS.enc.Base64.parse(iv);
var decrypt = CryptoJS.AES.decrypt(data, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return Base64.decode(CryptoJS.enc.Base64.stringify(decrypt));
}
module.exports = {
decode
}2.4 獲取手機號碼代碼實現
2.4.1 getphonenumber.js的實現
注意： appId、secret需要替換為自己小程序的
// pages/getphonenumber/getphonenumber.js
const WXBizDataCrypt = require('../../utils/WXBizDataCrypt');
Page({
/**
* 頁面的初始數據
*/
data: {
phoneNum:'',
sessionKey:'',
openId:'',
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
this.getSessionKey();
},
getPhoneNumber: function(e){
if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
wx.showToast({
title: '拒絕授權，無法獲取用戶手機號碼！',
})
return;
}
//解密數據獲取手機號碼
this.decryptData(this.data.sessionKey,e.detail.iv,e.detail.encryptedData);
},
//獲取SessionKey
getSessionKey: function(){
wx.login({
success:res =>{
console.log('code:'+res.code);
var data = {
'appid':'***********',//注意appId、secret需要替換為自身小程序的
'secret':'**************************',
'js_code':res.code,
'grant_type':'authorization_code'
};
wx.request({
url:'https://api.weixin.qq.com/sns/jscode2session',
data:data,
method:'GET',
success:res =>{
console.log("jscode2session result: ",res);
this.setData({
sessionKey:res.data.session_key,
openId: res.data.openId
})
},
fail:function(res){
console.log("獲取jscodeSession fail: ",res);
}
})
}
})
},
//解密數據
decryptData: function(key,iv,encryptedData){
var processData = WXBizDataCrypt.decode(key,iv,encryptedData);
console.log("解密數據： ",processData);
var jsonObj = JSON.parse(processData);
this.setData({
phoneNum: jsonObj['phoneNumber']
})
},
})2.4.2 getphonenumber.wxml 實現
<!--pages/getphonenumber/getphonenumber.wxml-->
<button type="primary" bindgetphonenumber="getPhoneNumber" open-type='getPhoneNumber'>獲取手機號碼</button>
<text>獲取到的手機號碼:{{phoneNum}}</text>到這里，編碼過程已經完成了。 備注：一般情況下 獲取jscode2session 是放到服務器端去實現的，這里我把獲取sessionKey全都放在小程序端去實現了。 參考小程序官網鏈接：
3、運行效果圖
點擊獲取手機號碼:
本文轉載于：掘金社區，如有侵犯，請聯系刪除
