Uniapp 小程序获取用户手机号功能实现

在开发 Uniapp 小程序时，获取用户手机号是一个常见的需求，比如用于用户注册、身份验证等场景。下面将详细介绍如何在 Uniapp 小程序中实现获取用户手机号的功能。

前端代码实现

1. uniapp自带按钮

在页面中添加一个按钮，当用户点击该按钮时，会触发获取手机号的操作。这里使用 v-if 指令判断当前平台是否为微信小程序，只有在微信小程序环境下才显示该按钮。

<template>
  <button
    v-if="'WechatMiniProgram' === sheep.$platform.name"
    class="ss-reset-button type-btn bind-btn"
    open-type="getPhoneNumber"
    @getphonenumber="getPhoneNumber"
  >
    去绑定
  </button>
</template>

2. 处理获取手机号事件

在 script 部分，实现 getPhoneNumber 方法，该方法会在用户点击按钮并授权后被调用。

<script>
export default {
    
    
  methods: {
    
    
    getPhoneNumber(e) {
    
    
      // 检查用户是否授权成功
      if (e.detail.errMsg === 'getPhoneNumber:ok') {
    
    
        // 获取加密数据和加密向量
        const encryptedData = e.detail.encryptedData;
        const iv = e.detail.iv;

        // 获取用户登录凭证 code
        uni.login({
    
    
          success: (loginRes) => {
    
    
            if (loginRes.code) {
    
    
              // 调用后端接口，将 code、encryptedData 和 iv 发送给后端
              uni.request({
    
    
                url: 'https://your-api-url.com/getPhoneNumber',
                method: 'POST',
                data: {
    
    
                  code: loginRes.code,
                  encryptedData: encryptedData,
                  iv: iv
                },
                success: (res) => {
    
    
                  // 处理后端返回的结果
                  if (res.data.code === 200) {
    
    
                    // 获取手机号成功
                    const phoneNumber = res.data.phoneNumber;
                    console.log('用户手机号：', phoneNumber);
                    // 这里可以进行后续操作，比如保存手机号到本地存储
                    uni.setStorageSync('phoneNumber', phoneNumber);
                    // 提示用户绑定成功
                    uni.showToast({
    
    
                      title: '手机号绑定成功',
                      icon: 'success'
                    });
                  } else {
    
    
                    // 获取手机号失败
                    uni.showToast({
    
    
                      title: '获取手机号失败，请稍后重试',
                      icon: 'none'
                    });
                  }
                },
                fail: (err) => {
    
    
                  // 请求接口失败
                  console.error('请求接口失败：', err);
                  uni.showToast({
    
    
                    title: '网络请求失败，请检查网络',
                    icon: 'none'
                  });
                }
              });
            } else {
    
    
              // 获取登录凭证失败
              console.error('获取登录凭证失败：', loginRes.errMsg);
              uni.showToast({
    
    
                title: '获取登录凭证失败，请稍后重试',
                icon: 'none'
              });
            }
          },
          fail: (err) => {
    
    
            // 登录失败
            console.error('登录失败：', err);
            uni.showToast({
    
    
              title: '登录失败，请检查网络',
              icon: 'none'
            });
          }
        });
      } else {
    
    
        // 用户拒绝授权
        console.log('用户拒绝授权获取手机号');
        uni.showToast({
    
    
          title: '你拒绝了授权，无法获取手机号',
          icon: 'none'
        });
      }
    }
  }
};
</script>

后端代码实现（简要说明）

在前端将 code、encryptedData 和iv发送到后端后，后端需要进行以下操作：

1. 使用 code 调用微信的接口获取 session_key。
2. 使用 session_key、encryptedData 和 iv 对加密数据进行解密，从而得到用户的手机号。
3. 将解密后的手机号返回给前端。
   不同的后端语言和框架实现方式可能有所不同，这里就不详细展开了。

总结

通过以上步骤，我们就可以在 Uniapp 小程序中实现获取用户手机号的功能。需要注意的是，获取用户手机号需要用户主动授权，并且要确保后端接口的安全性，防止数据泄露。

希望这篇博客能帮助你理解和实现 Uniapp 小程序获取用户手机号的功能。如果你有任何疑问或建议，欢迎在评论区留言。