小程序經過用戶受權獲取手機號之getPhoneNumber

小程序有一個獲取用戶很便捷的api，就是經過getPhoneNumber獲取用戶的已經綁定微信的手機號碼。有一點要你們注意，如今微信和注重用戶體驗，有些方法都是須要用戶主動去觸發才能調用的，好比getPhoneNumber。

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

實現思路：

直接上乾貨：

一、

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button> 

二、JS內getPhoneNumbe組件函數（該事件中最重要的就是在wx.login登陸後發起接口請求），這裏須要配置參數來給接口： 

這些是必不可少的參數，這些齊備才能算一個合法的請求。

appid: 「你的小程序APPID」, secret: 「你的小程序appsecret」, code: res.code, encryptedData: telObj, iv: ivObj

 

//經過綁定手機號登陸
　　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({
            url: 'https://你的接口文件路徑', //接口地址
            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