2024.02.04更新

作者最近做了一個小程序項目，證明了純前端獲取手機號是不可以發(fā)布的，首先審核時會因為appsecret明文而不通過，就算你使用某種加密方法繞過審核，正式發(fā)布后在真機環(huán)境還是不可以使用的，所以本方法僅供練習(xí)使用，在第二步拿到code之后傳給后端就可以了，后端的做法就和文中接下來的步驟差不多，拿token然后請求手機號。

------------------------------------------------------------------------------正文--------------------------------------------------------------------------------------
需求場景：
作者之前做了一個適配手機端的網(wǎng)頁項目，由于項目要的急，當(dāng)時產(chǎn)品并沒有要求登錄等權(quán)限控制模塊，給客戶演示時也是使用瀏覽器切換到手機端直接查看網(wǎng)址，現(xiàn)在演示完畢后，要求增加權(quán)限控制模塊。

由于整個項目除了小程序端還有完整的網(wǎng)頁端系統(tǒng)，所以小程序這邊只需要做一個獲取用戶手機號傳輸給后端進(jìn)行權(quán)限校驗即可。

作者作為前端小萌新，此前沒有實際的小程序開發(fā)經(jīng)驗，在網(wǎng)上查資料也大部分是通過后端協(xié)助完成的這件事情，由于作者這邊暫時沒有后端支持（并且很閑 ），所以自己通過啃文檔和查資料完成了小程序前端獲取用戶手機號。

實現(xiàn)步驟：
首先第一步肯定是下載微信開發(fā)者工具，并且創(chuàng)建一個空白項目，這個步驟作者就不多說了，不會的朋友可以百度一下，有很多教程，難度不大。

第二步，使用微信小程序手機號快速驗證組件，具體使用方法小程序官網(wǎng)說的非常詳細(xì)（如圖）。

但是這里要注意的一點是，有可能會出現(xiàn)getPhoneNumber回調(diào)函數(shù)的默認(rèn)參數(shù)中不存在code的情況，這是由于微信開發(fā)者工具創(chuàng)建的項目默認(rèn)的調(diào)試基礎(chǔ)庫版本較低的原因，可以在右上角詳情-本地設(shè)置中修改調(diào)試基礎(chǔ)庫版本。

<view class="container">
 <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">獲取手機號</button>
</view>

在項目默認(rèn)目錄的index.wxml中使用組件。而后在index.js中寫getPhoneNumber回調(diào)函數(shù)，這個code就是我們需要的動態(tài)令牌了。

getPhoneNumber (e) {
      let token = ''
	  let code = e.detail.code
}

第三步，獲取token，這一步獲取token主要是獲取手機號的接口需要傳遞token才能使用，一般情況下這步是由后端進(jìn)行，但如前文所說，暫時沒有后端支持，所以測試程序就用前端進(jìn)行該接口的調(diào)用，具體代碼如下。

async getPhoneNumber (e) {
      let token = ''
      let code = e.detail.code
      let that = this
      wx.request({
        url: 'https://api.weixin.qq.com/cgi-bin/token',
        data:{
            grant_type:'client_credential',
            appid:'wx483fa89af0dceeb0',
            secret:'c70dc2d3515abf59b054ca60cc1656c5'
        },
        success(res){
            token = res.data.access_token
            that.getRealPhone(token,code)
        }
      })
  },

其中，gengRealPhone是真正獲取手機號的函數(shù)，token接口的幾個參數(shù)分別如下圖方式獲取：

appid與appsecret都是很好獲取到的，這里要注意的是grant_type參數(shù)的值就是’client_credential‘，還有就是要將詳情中不校驗合法域名選項勾選，這個在正式開發(fā)時應(yīng)該可以在開發(fā)設(shè)置中將域名加入白名單的，這里我就不多做演示。

第三步，調(diào)用getuserphonenumber接口，獲取用戶手機號，代碼如下。

getRealPhone(access_token,code){
    wx.request({
        url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${access_token}`,
        data:{
            code
        },
        method:'POST',
        success(res){
           console.log(res.data.phone_info.phoneNumber);
        }
      })
  },

這步?jīng)]什么好講的，code與token都已經(jīng)獲取，只要將函數(shù)放在token接口的成功回調(diào)中調(diào)用就可以了。


完整代碼：

// index.js

// 獲取應(yīng)用實例
const app = getApp()

Page({
  data: {
   
  },

  onLoad() {
  },
  getRealPhone(access_token,code){
    wx.request({
        url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${access_token}`,
        data:{
            code
        },
        method:'POST',
        success(res){
           console.log(res.data.phone_info.phoneNumber);
        }
      })
  },
  async getPhoneNumber (e) {
      let token = ''
      let code = e.detail.code
      let that = this
      wx.request({
        url: 'https://api.weixin.qq.com/cgi-bin/token',
        data:{
            grant_type:'client_credential',
            appid:'wx483fa89af0dceeb0',
            secret:'c70dc2d3515abf59b054ca60cc1656c5'
        },
        success(res){
            token = res.data.access_token
            that.getRealPhone(token,code)
        }
      })
  },


})

<!--index.wxml-->
<view class="container">
 <button open-type="getPhoneNumber" style="width: 200px;height: 50px;" bindgetphonenumber="getPhoneNumber">獲取手機號</button>
</view>

由于之前沒有接觸過小程序開發(fā)，所以不太清楚純前端獲取手機號在實際開發(fā)中究竟有多大意義，因為我在網(wǎng)上基本沒有找到純前端獲取手機號的文章，所以才寫了這篇，只是作為一個學(xué)習(xí)的例子的話應(yīng)該問題不大。

另附微信小程序官方開發(fā)文檔，文中大多數(shù)內(nèi)容都來源于此。文章來源地址http://www.zghlxwxcb.cn/news/detail-770084.html

到了這里，關(guān)于【微信小程序】純前端獲取用戶手機號碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！