效果图如下：

image.png

html页面

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">微信授权手机号登录</button>

js页面

  getPhoneNumber:function(res){
    const encryptedData = res.detail.encryptedData
    const iv = res.detail.iv
    if (res.detail.encryptedData) {
      //用户按了允许授权按钮
      var that = this;
      wx.login({
        success(res) {
          const code = res.code
          // 根据小程序返回的密钥传给后端获取真正的手机号
          axios({
            url: '/wx/miniProgram/login', method: "POST", data: {
              code: code
            }
          }).then(({ res }) => {
            if(res.status === 0){
              axios({
                url: '/wx/miniProgram/getPhoneNumber', method: "POST", data: {
                  code: code,
                  encryptedData: encryptedData,
                  iv:iv
                }
              }).then(({ res }) => {
                  wx.switchTab({
                    url: '../index/index',
                    success: (res) => {}
                })
              })
            }
          })
          
        }
      })
    } else {
      //用户按了拒绝按钮
      wx.showModal({
        title: '警告',
        content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
        showCancel: false,
        confirmText: '返回授权',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击了“返回授权”');
          }
        }
      });
    }
  },