uni-app 无法获取到手机号

开发环境	版本号	项目创建方式
Windows	22000613	HBuilderX

示例代码：

<template>  
  <view>  
    <t-button open-type="getPhoneNumber" @getphonenumber="getPhoneNumbera" block theme="primary" variant="plain">t-button</t-button>  

    <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumbera">button</button>  
  </view>  
</template>  

<script>  
  export default {  
    data() {  
      return {}  
    },  
    getPhoneNumberb(e) {  
      console.log(e, 333);  
    },  
    methods: {  
      getPhoneNumbera(e) {  
        console.log('getPhoneNumbera', e)  
      },  
    },  
  }  
</script>  

<style>  
</style>

操作步骤：

在页面中使用 t-button，open-type 为 getPhoneNumber，接收函数为 getPhoneNumbera，接收函数中无法获取到手机号信息。

编译出来的2个按钮，关于事件部分代码不同。

<view>  
               <t-button open-type="getPhoneNumber" data-event-opts="{{[['^getphonenumber',[['getPhoneNumbera']]]]}}" bind:getphonenumber="__e" bind:__l="__l" vue-slots="{{['default']}}">t-button</t-button>  
               <button open-type="getPhoneNumber" data-event-opts="{{[['getphonenumber',[['getPhoneNumbera',['$event']]]]]}}" bindgetphonenumber="__e">button</button>  
</view>

预期结果：

希望能获取到事件信息。

实际结果：

获取不到事件信息。生成的 wxml 代码中。2个按钮的 data-event-opts 不同。

bug描述：

通过截图中的代码，无法获取到手机号事件。

vueper 1楼

问题解决了，tdesign-miniprogram 组件，需要自己传递属性 data-com-type=“wx”，后续才可以通过内置组件的方式拿到 $event 对象信息
示例代码：
<t-button data-com-type=“wx” open-type=“getPhoneNumber” @getphonenumber=“getPhoneNumber($event)” block theme=“primary” variant=“plain”>t-button</t-button>

bupafengyu 2楼

排查 uniapp 集成 tdesign-miniprogram 时，button 的开放能力无法正确获取 event 事件问题

ionicwang 3楼

您好，请教一下，您是怎么在uniapp中引入tdesign-miniprogram组件库的呢？

eggper 4楼

在 uni-app 中，获取手机号通常需要通过微信小程序或支付宝小程序的 API 来实现。如果你无法获取到手机号，可能是以下几个原因导致的：

1. 未正确调用 API

在微信小程序中，获取手机号需要使用 button 组件的 open-type="getPhoneNumber" 属性，并通过 bindgetphonenumber 事件来获取加密数据，然后通过后端服务器解密。

示例代码：

<button open-type="getPhoneNumber" [@getphonenumber](/user/getphonenumber)="getPhoneNumber"></button>

methods: {
  getPhoneNumber(e) {
    if (e.detail.errMsg === 'getPhoneNumber:ok') {
      // 获取到加密数据
      const encryptedData = e.detail.encryptedData;
      const iv = e.detail.iv;

      // 将 encryptedData 和 iv 发送到后端解密
      uni.request({
        url: 'https://your-server.com/decrypt-phone',
        method: 'POST',
        data: {
          encryptedData: encryptedData,
          iv: iv
        },
        success: (res) => {
          console.log('解密后的手机号:', res.data.phoneNumber);
        }
      });
    } else {
      console.error('获取手机号失败:', e.detail.errMsg);
    }
  }
}

2. 未配置服务器解密

获取到的手机号是加密的，需要在后端服务器上使用微信提供的解密算法进行解密。你需要确保后端服务器已经正确配置了解密逻辑。

解密流程：

使用 session_key 和 iv 对 encryptedData 进行解密。
解密后可以得到包含手机号的 JSON 数据。

3. 未正确获取 `session_key`

在解密手机号时，需要使用用户的 session_key。session_key 通常是通过 wx.login 获取的 code 换取得到的。

确保在获取手机号之前，已经通过 wx.login 获取了 code，并成功换取了 session_key。

4. 未正确配置小程序权限

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

步骤：

登录微信公众平台。
进入“开发” -> “开发设置”。
确保“获取手机号”权限已经开启。

5. 支付宝小程序获取手机号

在支付宝小程序中，获取手机号的方式与微信小程序类似，也是通过 button 组件的 open-type="getAuthorize" 和 scope="phoneNumber" 来实现。