微信小程序获取手机号getPhoneNumber

最近在开发微信小程序，需要获取用户的手机号并展示，网上有很多案例，但不尽相同，让人很是头疼，最后结合了几十篇同行的分享之后终于是搞定了，现在分享给大家，希望少入坑。

1. 给button设置open-type的类型为getPhoneNumber

// a.wxml
<button formType="submit" class="formbutton" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">点击授权手机号</button>

2. 获取code并将获取到的iv和encryptedData一起传给后端解密

由于在授权手机号的时候有可能刷新登录态，这里我们在onload生命周期中先登录，然后验证登录态是否有效，将加密信息传给后端解密。
在a.js的onload页面添加代码

// a.js
onLoad: function (options) {
    this.login()
  }

获取手机号函数如下

// a.js
//获取手机号
  getPhoneNumber: function (e) {
    console.log("getPhoneNumber", e.detail)
    let iv = e.detail.iv
    let encryptedData = e.detail.encryptedData
    let self = this
    //验证登陆态是否有效
    wx.checkSession({
      success: res => {
        console.log("res_checkSession-有效", res)
        if (e.detail.errMsg == "getPhoneNumber:ok") {
          cwx.request({
            //给后端传iv，encryptedData，code解密手机号的接口
            url: "*********",
            data: {
              code: self.data.code,
              encryptedData: encryptedData,
              iv: iv
            },
            complete: res => {
              console.log("获取手机号成功", res)
              if (res && res.data && res.data.retCode == 0) {
                let phoneNumber = res.data.phoneNumber
                
                self.setData({
                  phoneNumber
                })
               
              } else {
                wx.showToast({
                  title: "手机号授权失败，请重试",
                  icon: "none",
                  duration: 2000
                })
              }
            }
          })
        } else {
          wx.showToast({
            title: "提供手机号，我们才能通知您入群哦",
            icon: "none",
            duration: 2000
          })
        }
      },
      fail: res => {
        console.log("res_checkSession-无效", res)
        self.login()
      }
    })
  },
  //使用wx.login获取code
  login: function () {
    let self = this
    cwx.login({
      success: res => {
        console.log("login-code", res)
        let code = res.code
        self.setData({
          code
        })
      }
    })
  }

其中cwx为公司封装的方法，支持用data传递参数，其他与官网一致。

写在后面~~ 第一次接触小程序，很多知识点不是很清楚，目前这样是实现了授权手机号的功能，但有没有问题暂不知晓，欢迎大牛在线指正，在下提前感谢您的批评。。。