小程式如何取得用戶(hù)手機(jī)號(hào)碼？以下這篇文章為大家介紹一下微信小程式開(kāi)發(fā)中取得使用者手機(jī)號(hào)碼的方法，希望對(duì)大家有幫助！

1、背景

在平常使用第三方微信小程式時(shí)，經(jīng)常會(huì)有需要取得微信手機(jī)號(hào)碼的情況，如下圖所示：

【相關(guān)學(xué)習(xí)推薦：小程式開(kāi)發(fā)教學(xué)】

那這種是怎麼實(shí)現(xiàn)的呢？以下記錄下取得微信手機(jī)號(hào)碼的方法。

**備註：**需要有一個(gè)微信小程式號(hào)，而這個(gè)號(hào)碼是經(jīng)過(guò)企業(yè)認(rèn)證的。 （取得手機(jī)號(hào)碼的功能不對(duì)個(gè)人小程式號(hào)碼生效）

那下面我們就一起開(kāi)始，取得手機(jī)號(hào)碼的程式設(shè)計(jì)之旅了。

2、程式碼實(shí)作

2.1 新建工程

在app.json檔案中新增????"pages/getphonenumber/getphonenumber", 如下圖：

##2.2 準(zhǔn)備密文解析工具類(lèi)別

#透過(guò)微信小程式提供的介面取得手機(jī)號(hào)碼，回傳的資料是加密的，所以需要對(duì)傳回的加密資料進(jìn)行解密。

1)? 新終端機(jī)

在微信開(kāi)發(fā)者工具中，點(diǎn)選"終端" -》 「新終端」 如下圖所示：

2) 執(zhí)行? npm init 指令

#//執(zhí)行npm init後需要你輸入一些訊息，直接一直點(diǎn)選「回車(chē)」鍵就好

如下圖：

3) 依序執(zhí)行? npm install crypto-js --save 、?npm install js-base64 --save

如下圖所示:

4）建構(gòu)npm

在微信開(kāi)發(fā)工具的選單欄選擇“工具” -” “建置npm” 建置完成即可。

2.3 解析類(lèi)別實(shí)作

在工程的utils資料夾下新建?WXBizDataCrypt.js文件，程式碼實(shí)作如下所示：

var CryptoJS = require("crypto-js");
var Base64 = require("js-base64");

//解析加密數(shù)據(jù)
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 取得手機(jī)號(hào)碼代碼實(shí)作

#2.4.1 getphonenumber.js的實(shí)作

#注意： appId、secret需要替換為自己小程式的

// pages/getphonenumber/getphonenumber.js
const WXBizDataCrypt = require('../../utils/WXBizDataCrypt');

Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    phoneNum:'',
    sessionKey:'',
    openId:'',
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function (options) {
    this.getSessionKey();
  },

  getPhoneNumber: function(e){
    if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
      wx.showToast({
        title: '拒絕授權(quán)，無(wú)法獲取用戶(hù)手機(jī)號(hào)碼！',
      }) 
      return;
    }
    //解密數(shù)據(jù)獲取手機(jī)號(hào)碼
    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);
          }
        })
      }
    })
  },

  //解密數(shù)據(jù)
  decryptData: function(key,iv,encryptedData){
    var processData = WXBizDataCrypt.decode(key,iv,encryptedData);
    console.log("解密數(shù)據(jù)： ",processData);
    var jsonObj = JSON.parse(processData);
    this.setData({
      phoneNum: jsonObj['phoneNumber']
    })
  },
})

2.4.2 getphonenumber.wxml 實(shí)作

<!--pages/getphonenumber/getphonenumber.wxml-->
<button type="primary"  bindgetphonenumber="getPhoneNumber" open-type=&#39;getPhoneNumber&#39;>獲取手機(jī)號(hào)碼</button>
<text>獲取到的手機(jī)號(hào)碼:{{phoneNum}}</text>

到這裡，編碼過(guò)程已經(jīng)完成了。 備註：一般情況下 取得jscode2session 是放到伺服器端去實(shí)現(xiàn)的，這裡我把取得sessionKey全都放在小程式端去實(shí)作了。 參考小程式官網(wǎng)連結(jié)：

3、運(yùn)行效果圖

點(diǎn)擊取得手機(jī)號(hào)碼:

更多程式相關(guān)知識(shí)，請(qǐng)?jiān)煸L：

程式設(shè)計(jì)影片！ ！

以上是小程式開(kāi)發(fā)實(shí)務(wù)之淺析如何取得手機(jī)號(hào)碼的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！