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

最近在开发一个小程序需要申请用户手机号，遇到一些问题记录一下，这里只在小程序演示，正式开发这些都会在服务端操作

<button class="loginbtn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">授权手机号</button>

getPhoneNumber (e) {
    console.log(e.detail.code)
  }

这两步骤官方文档都有，但是后面遇到其他的细节问题

getToken(){
    let that = this
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/token',
      data: {
        grant_type: "client_credential",
        appid: "xxx",
        secret:"xxx"
      },
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      success(res) {
        console.log("token==",res.data.access_token)
        that.setData({
          access_token: res.data.access_token,
        })
        // that.loadImages()
      }
    })
  },
  getPhoneNumber (e) {
    let that = this
    console.log("getPhoneNumber=",e.detail)
    wx.request({
      url: "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token="+that.data.access_token,
      method: 'POST',
      data: {
        code: e.detail.code,
      },
      success: function(res) {
        console.log("phone=",res.data)
        wx.switchTab({
          url: '../yunshi/yunshi'
        })
      }
    })
  }

其中获取access_token官方文档也有

然后是获取用户手机号码，遇到一个问题就是getPhoneNumber的时候e.detail下面没有code参数，后面查询知道是小程序基础库版本过低，详情参考，然后讲版本库改为最新

然后就推送

最后获取用户手机号还有一步骤就是

wx.request({
      url: "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token="+that.data.access_token,
      method: 'POST',
      data: {
        code: e.detail.code,
      },

这里access_token要拼接在url，和get请求一样，code（e.detai.code）要放在body里面，这样才能获取用户手机号