UNI-APP 获取用户手机号授权与服务器端处理指南

　　在 UNI-APP 中，获取用户手机号的流程通常涉及到微信小程序的授权机制。以下是实现步骤：

1. 配置小程序权限

　　首先，确保在微信小程序的管理后台已经开启了获取用户手机号的权限。

2. 使用 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>

3. 服务器端处理

　　在服务器端，你需要使用微信提供的 API 来通过 code​ 获取用户的手机号。具体步骤如下：

1. 获取 ​access_token​​：首先，你需要通过小程序的 appid​ 和 secret​ 获取 access_token​。

   GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
   

2. 获取用户手机号：使用 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"
       }
     }
   }
   

4. 处理响应

　　服务器端获取到手机号后，将其返回给前端，前端再进行相应的处理。

注意事项

• 安全性：手机号是敏感信息，确保在传输和存储过程中进行加密处理。
• 用户隐私：获取用户手机号需要用户明确授权，确保在用户同意的情况下进行获取。

　　通过以上步骤，你可以在 UNI-APP 中实现获取用户手机号的功能。