uniapp button getPhoneNumber

### 实现 UniApp 中通过 Button 调用 getPhoneNumber API 在 UniApp 应用程序中，为了实现点击按钮来获取用户的手机号码功能，可以采用 `<button>` 组件并设置 `open-type` 属性为 `"getPhoneNumber"`。当用户点击该按钮时，会触发相应的事件处理函数，在其中可以通过调用微信提供的接口完成手机号的加密数据收集工作。 #### HTML 部分 创建一个带有特定属性配置的按钮用于发起请求： ```html <button class="custom-button" open-type="getPhoneNumber" @getphonenumber="handleGetPhone"> 一键获取手机号 </button> ``` 这里设置了样式类名 `.custom-button` 来方便后续 CSS 定制化设计；同时绑定了名为 `@getphonenumber` 的事件监听器到 `handleGetPhone()` 方法上[^1]。 #### JavaScript 处理逻辑 接下来定义上述提到的方法来进行实际操作： ```javascript export default { methods: { handleGetPhone(e) { const { detail } = e; if (!detail.errMsg || !detail.encryptedData || !detail.iv) { console.error('Failed to obtain phone number.'); return; } uni.login({ provider: 'weixin', success(loginRes) { // 将 loginRes.code 和其他必要参数发送给服务器端解密 const dataToSend = { session_key: /* your_session_key */, // 替换成真实的 Session Key 或者从缓存读取 encrypted_data: detail.encryptedData, iv: detail.iv, code: loginRes.code }; // 发送 POST 请求至后端服务进行进一步处理... uni.request({ url: '/your-server-endpoint', // 后端接收 URL method: 'POST', data: dataToSend, success(res) { console.log('Received decrypted user info:', res.data); }, fail(err) { console.error('Error occurred while sending request.', err); } }); } }); } } } ``` 这段代码实现了对微信登录凭证 (`code`) 及其关联的加密资料 (`encryptedData`, `iv`) 进行打包并通过 HTTP 请求传递给后台服务器的过程[^2]。 请注意，以上示例中的某些变量（如 `/* your_session_key */`）需要根据实际情况替换为有效的值或通过适当的方式动态获取。