微信小程序用户手机号授权获取

要想成功获取微信小程序手机号,应该先明确：

一、明确微信小程序规则

1.现微信规定不能在onLoad,onShow这类页面触发函数中直接获取

2.只能通过用户行为触发，比如点击某个按钮

二、获取手机号的流程

1.公众平台获取appId与secret

2.结合手机号按钮及其事件绑定，获取 code

3.调用接口获取 access_token

4.根据 code 与 access_token 获取手机号

根据以上步骤, 我们直接从第二步开始:

1.此处的code是需要先写一个官方提供的特殊的按钮：

然后在js中写上改按钮绑定的函数getPhoneNumber，根据以下写法获取code:

2.调用

`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${secret}`

查询参数：grant_type=client_credential&appid=yourAppid&secret=yourSecret

注意：这里的grant_type=client_credential固定写法，appid和secret是微信公众平台查的。

示例：

3.调用

`https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${access_token}`

查询参数:access_token 直接使用上一步获取到的即可。

请求体数据：code 在按钮事件绑定的函数getPhoneNubmer中e.detail.code获取得到。

示例：

完整代码演示：

 //绑定手机
 getPhoneNumber: function (e) {
  console.log(e);
  const code = e.detail.code
  wx.request({
    url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${secret}`,
    method: 'GET',
    success:res=>{
      if(res.statusCode!==200) return
      const access_token = res.data.access_token
      wx.request({
        url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${access_token}`,
        method: 'POST',
        data: {
          code
        },
        success:data=>{
          if(data.statusCode!==200) return
          const { phoneNumber } = data.data.phone_info // 这里就是获取到的手机号
        }
      })
    }
  })
},

通过以上步骤，就可以实现点击按钮弹出手机号获取授权，点击确认即可获取到用户的手机号了~