微信小程序開發--獲取微信用戶手機號碼

背景

在平時使用第三方微信小程序時，經常會有需要獲取微信手機號碼的情況，如下圖所示：

​

那這種是怎樣實現的呢？下面記錄下獲取微信手機號碼的方法。

備注：需要有一個微信小程序號，並且這個號是經過企業認證的。（獲取手機號碼的功能不對個人小程序號生效）

 

那下面我們就一起開始，獲取手機號碼的編程之旅了。

1、打開微信開發者工具新建工程

在app.json文件中新增    "pages/getphonenumber/getphonenumber", 如下圖所示：

​

2、准備密文解析工具類

通過微信小程序提供的接口獲取手機號碼，返回的數據是加密的，所以需要對返回的加密數據進行解密。

2.1 添加密文解析工具類需要用到的庫

第一步、在微信開發者工具中，點擊 "終端" ——> “新建終端” 如下圖所示：

​  ​

第二步、執行  npm init 指令

//執行npm init后需要你輸入一些信息，直接一直點擊 “回車”鍵就好

如下圖所示：

​

第三步、依次執行  npm install crypto-js --save 、 npm install js-base64 --save

如下圖所示:

​

第四步、在微信開發工具的菜單欄 選擇 “工具” ——> “構建npm” 構建完成即可

2.2 解析類實現

在工程的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
}

3、getphonenumber的實現

3.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']
    })
  },
})

3.2、getphonenumber.wxml 實現

<!--pages/getphonenumber/getphonenumber.wxml-->
<button type="primary"  bindgetphonenumber="getPhoneNumber" open-type='getPhoneNumber'>獲取手機號碼</button>
<text>獲取到的手機號碼:{{phoneNum}}</text>

好了，實現內容就這么多。

備注：一般情況下 獲取jscode2session 是放到服務器端去實現的，這里我把獲取sessionKey全都放在小程序端去實現了。

參考小程序官網鏈接：

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html

 

4、運行效果圖

默認運行                                                               

​   

 

點擊“獲取手機號碼”  

 ​       

 

點擊 “允許”按鈕

 

好了，今天的文章就到這里，如果內容對你有所幫助，不要忘記點個贊喲~​