效果图:
我这里使用uniapp开发微信小程序,代码就全部放一起了,大家自行参考哦
大概说下逻辑:前端通过用户授权获取到code,把code传给后端,后端使用另一半code通过官方api获取到手机号,然后吧手机号返给前端即可
<button open-type="getPhoneNumber" @getphonenumber="onPhoneNumberGet" type="primary"
class="relate-title card">获取名片</button>
const onPhoneNumberGet = (e) => {
if (e.detail.errMsg === 'phonenumberget:fail user deny') {
wx.showToast({
title: '您拒绝了手机号授权',
icon: 'none'
});
return;
}
const code = e.detail.code;
if (!code) {
wx.showToast({
title: '授权失败,请重试',
icon: 'none'
});
return;
}
wx.request({
url: 'https://XXXXXX', // 后端接口地址
method: 'POST',
data: {
code: code
},
success: (response) => {
//拿到后端返回的手机号
},
fail: (err) => {
wx.showToast({
title: '网络错误,请重试',
icon: 'none'
});
console.error('请求失败:', err);
}
});
}