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

效果图:

image.png

我这里使用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);
			}
		});
	}