效果图如下：
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('用户点击了“返回授权”');
}
}
});
}
},
