























在 UNI-APP 中,获取用户手机号的流程通常涉及到微信小程序的授权机制。以下是实现步骤:
首先,确保在微信小程序的管理后台已经开启了获取用户手机号的权限。
button 组件 在 UNI-APP 中,你可以使用 button 组件来触发获取用户手机号的操作。button 组件需要设置 open-type 为 getPhoneNumber,并绑定 @getphonenumber 事件。
<template>
<view>
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
</view>
</template>
<script>
export default {
methods: {
async getPhoneNumber(e) {
if (e.detail.errMsg === 'getPhoneNumber:ok') {
// 用户点击了允许授权
const { code } = e.detail;
// 将 code 发送到服务器,服务器通过 code 获取用户手机号
const res = await this.$http.post('/api/getPhoneNumber', { code });
if (res.data.success) {
const phoneNumber = res.data.phoneNumber;
console.log('用户手机号:', phoneNumber);
} else {
console.error('获取手机号失败:', res.data.message);
}
} else {
// 用户点击了拒绝授权
console.error('用户拒绝授权');
}
}
}
}
</script>
在服务器端,你需要使用微信提供的 API 来通过 code 获取用户的手机号。具体步骤如下:
获取 access_token:首先,你需要通过小程序的 appid 和 secret 获取 access_token。
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
获取用户手机号:使用 access_token 和 code 来获取用户的手机号。
POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN
请求体:
{
"code": "CODE_FROM_CLIENT"
}
响应示例:
{
"errcode": 0,
"errmsg": "ok",
"phone_info": {
"phoneNumber": "12345678901",
"purePhoneNumber": "12345678901",
"countryCode": "86",
"watermark": {
"timestamp": 1630000000,
"appid": "wx1234567890abcdef"
}
}
}
服务器端获取到手机号后,将其返回给前端,前端再进行相应的处理。
通过以上步骤,你可以在 UNI-APP 中实现获取用户手机号的功能。
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。