效果圖如下：

image.png

html頁面

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">微信授權(quán)手機(jī)號(hào)登錄</button>

js頁面

  getPhoneNumber:function(res){
    const encryptedData = res.detail.encryptedData
    const iv = res.detail.iv
    if (res.detail.encryptedData) {
      //用戶按了允許授權(quán)按鈕
      var that = this;
      wx.login({
        success(res) {
          const code = res.code
          // 根據(jù)小程序返回的密鑰傳給后端獲取真正的手機(jī)號(hào)
          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: '您點(diǎn)擊了拒絕授權(quán)，將無法進(jìn)入小程序，請(qǐng)授權(quán)之后再進(jìn)入!!!',
        showCancel: false,
        confirmText: '返回授權(quán)',
        success: function (res) {
          if (res.confirm) {
            console.log('用戶點(diǎn)擊了“返回授權(quán)”');
          }
        }
      });
    }
  },