快捷導(dǎo)航

微信小程序如何通過(guò)用戶授權(quán)獲取手機(jī)號(hào)(getPhoneNumber)

更新時(shí)間：2020年01月21日 10:44:29 作者：最初的樣子

這篇文章主要介紹了微信小程序如何通過(guò)用戶授權(quán)獲取手機(jī)號(hào)(getPhoneNumber),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

小程序有一個(gè)獲取用戶很便捷的api，就是通過(guò)getPhoneNumber獲取用戶的已經(jīng)綁定微信的手機(jī)號(hào)碼。有一點(diǎn)要大家注意，現(xiàn)在微信和注重用戶體驗(yàn)，有些方法都是需要用戶主動(dòng)去觸發(fā)才能調(diào)用的，比如getPhoneNumber。

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

實(shí)現(xiàn)思路：

直接上干貨：

1、

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

2、JS內(nèi)getPhoneNumbe組件函數(shù)（該事件中最重要的就是在wx.login登錄后發(fā)起接口請(qǐng)求），這里需要配置參數(shù)來(lái)給接口：

這些是必不可少的參數(shù)，這些齊備才能算一個(gè)合法的請(qǐng)求。

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

//通過(guò)綁定手機(jī)號(hào)登錄
　　getPhoneNumber: function (e) {
   var ivObj = e.detail.iv
   var telObj = e.detail.encryptedData
   var codeObj = "";
   var that = this;
   //------執(zhí)行Login---------
   wx.login({
    success: res => {
     console.log('code轉(zhuǎn)換', res.code);
 
　　　　　　//用code傳給服務(wù)器調(diào)換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("手機(jī)號(hào)=", phoneObj)
       wx.setStorage({  //存儲(chǔ)數(shù)據(jù)并準(zhǔn)備發(fā)送給下一頁(yè)使用
        key: "phoneObj",
        data: res.data.phoneNumber,
       })
      }
     })
 
     //-----------------是否授權(quán)，授權(quán)通過(guò)進(jìn)入主頁(yè)面，授權(quán)拒絕則停留在登陸界面
     if (e.detail.errMsg == 'getPhoneNumber:user deny') { //用戶點(diǎn)擊拒絕
      wx.navigateTo({
       url: '../index/index',
      })
     } else { //允許授權(quán)執(zhí)行跳轉(zhuǎn)
      wx.navigateTo({
       url: '../test/test',
      })
     }
    }
   });
},

最終結(jié)果展示：