【微信小程序】获取用户手机号的实现

0 说明

本文，是纯前端实现微信小程序获取用户手机号的实现方法总结，并给出了相应的注意点与优化点说明。
（注意：获取用户手机号，需要用已通过企业认证的小程序账号）

0.1 为什么要写这篇文章？

1、记录一下实现方法。2、官方文档写得详细具体，但弯弯绕绕，不易理解与操作。3、网络上缺少相关的高质量的完整文章。

0.2 纯前端，能不能独自实现一个获取用户手机号的demo？

可以。

0.3 纯前端，需不要对手机号等信息进行解密？

不需要。

0.4 本文有哪些局限性？

对于后续优化，本文只能给出方向，不能给出具体实现；对于一进入小程序，不需要点击按钮就获取用户手机号，并未找到实现方法；对于点击获取用户手机号，并完成用户真实性相关验证，从而一键登录的需求，未进行思考与实现。

1 实现

1.1 文档

你需要阅读的文档：
phonenumber.getPhoneNumber
auth.getAccessToken
获取手机号（新版）
获取手机号（老版）
后端 API

1.2 getPhoneNumber接口

第一步，不是新建按钮，而是先看这个接口，要获得用户手机号，就是要请求这个接口。
请求地址

#接口信息
POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN

请求参数
请求这个接口，需要调用两个参数access_token,code，通过用这两个参数请求这个接口，就可以获得用户手机号了。
示例返回

{"errcode":0,"errmsg":"ok","phone_info": {"phoneNumber":"xxxxxx","purePhoneNumber": "xxxxxx","countryCode": 86,"watermark": {"timestamp": 1637744274,"appid": "xxxx"}}
}

所以问题，就是怎么获得这两个参数呢？

1.3 code

code要通过按钮获得，这时候，我们才来添加一个按钮，用户点击，我们获得code
wxml

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

// 方法
getPhoneNumber (e) {console.log(e.detail.code)
}

这里得到的e.detail.code就是我们所需要的code了，可以把它存在data里

1.4 access_token

请求地址

#请求地址
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

请求参数
grant_type，appid,secret，这里是get请求，所以直接拼在请求url里就行了
这里直接将AppSecret直接写在了请求里，非常不安全，当然实际上，此处仅是demo使用
真实开发中都是通过后端请求的，连api.weixin.qq.com根本无法配置到前端的可访问服务器地址中去
返回示例

{"access_token":"ACCESS_TOKEN","expires_in":7200}

在这里，我们就拿到了access_token

1.5 完成

实际上到这里已经完成了，现在新版获取的手机号不用解密、access_token在获取之前也不需要登陆，比老版本方便了很多

2 代码

wxml

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号
</button>

Page({data: {appId: '******',  // AppIdappSecret: '******',  // AppSecretaccessToken:'',  // 所需的AccessTokenphoneCode:'',  // 所需的CodephoneNumber:"",  // PhoneNumber},// 获取用户手机号按钮，点击事件getPhoneNumber(e){// 获取所需的Codethis.setData({phoneCode: e.detail.code})// 获取用户手机号this.getPhone()},/*** 获取用户手机号*/getPhone(){var _this =this;wx.request({url:'https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=' + _this.data.accessToken,method: 'POST',data:{// 获得的所需的Codecode: _this.data.phoneCode// access_token写在路由中},success (res) {// 成功获得用户手机号_this.setData({phoneNumber: res.data.phone_info.phoneNumber ?? ''})}})},/*** 获取所需的access_token*/getToken(){var _this =this;wx.request({url:'https://api.weixin.qq.com/cgi-bin/token?appid=' + _this.data.appId + '&secret=' + _this.data.appSecret + '&grant_type=client_credential',success (res) {_this.setData({accessToken: res.data.access_token}) }})},/*** 生命周期函数--监听页面加载*/onLoad(options) {// 获得access_tokenthis.getToken()},
)}

3 优化

此处，仅为前端demo，后续这些接口都需要从服务端发起访问，前端不能直接访问api.weixin.qq.com，并且也不能将appId与appSecret直接在前端写明。
此处，所有的请求都是微信小程序原生的wx.request，后续需要进行promise化封装，以及做一些请求加密解密、请求拦截器、api封装等等的操作。
此处，仅处理了用户同意授权的情况，而没有对用户拒绝授权的情况进行处理。
此处，getToken是在onLoad生命周期中进行的，进行代码改造，基于业务需求进行代码结构优化。

4 注意

示例代码getPhone()中，access_token需要写在路由中，虽然是POST方法，但也不能用data的方式，否则会报错47001 data format error hint 。
示例代码getToken()中，需要用到AppId与AppSecret。
需要使用企业认证的小程序账号，才能获取用户手机号，否则在返回请求中会报错getPhoneNumber:fail no permission
不需要进行解密操作，解密是老版实现方法中所需要的，既实现复杂，又不安全。