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

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
1
2

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

{
    "errcode":0,
    "errmsg":"ok",
    "phone_info": {
        "phoneNumber":"xxxxxx",
        "purePhoneNumber": "xxxxxx",
        "countryCode": 86,
        "watermark": {
            "timestamp": 1637744274,
            "appid": "xxxx"
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

1.3 code

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

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

js

// 方法
getPhoneNumber (e) {
    console.log(e.detail.code)
}
1
2
3
4

这里得到的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
1
2

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

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

在这里，我们就拿到了access_token

1.5 完成

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

---

2 代码

wxml

<button 
  open-type="getPhoneNumber" 
  bindgetphonenumber="getPhoneNumber">
  获取手机号
button>
1
2
3
4
5

js

Page({
  data: {
    appId: '******',  // AppId
    appSecret: '******',  // AppSecret
    accessToken:'',  // 所需的AccessToken
    phoneCode:'',  // 所需的Code
    phoneNumber:"",  // PhoneNumber
  },
  
  // 获取用户手机号按钮，点击事件
  getPhoneNumber(e){
    // 获取所需的Code
    this.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:{
        // 获得的所需的Code
        code: _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_token
    this.getToken()
  },
)}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

---

3 优化

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

---

4 注意

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