uniapp隱士获取用户手机号

### 实现 UniApp 中获取用户手机号 #### 准备工作 确保已注册并创建微信小程序，在微信开发者工具中创建 uni-app 项目，并确认 `manifest.json` 文件中的 mp-weixin 平台 appId 和 appSecret 配置无误[^2]。 #### 页面布局与交互设计 为了使用户体验更佳，通常会在按钮点击事件触发时请求权限。下面是一个简单的页面结构： ```html <template> <view class="container"> <!-- 获取手机号 --> <button type="primary" @click="getPhoneNumber">授权手机号</button> <!-- 显示获取到的信息 --> <text v-if="phoneNumber">{{ phoneNumber }}</text> </view> </template> <script> export default { data() { return { phoneNumber: '' }; }, methods: { getPhoneNumber(e) { const that = this; // 调用微信接口获得 code uni.login({ provider: 'weixin', success(loginRes) { if (loginRes.code) { console.log('登录成功，code:', loginRes.code); // 用户同意提供手机号后处理逻辑 wx.getWeRunData({ success(res) { let encryptedData = res.encryptedData; let iv = res.iv; // 将必要参数发送至服务器端解密 uni.request({ url: 'https://yourserver.com/api/decryptPhone', // 后端地址 method: 'POST', data: { code: loginRes.code, encryptedData: encryptedData, iv: iv }, success(serverResponse) { if (serverResponse.data.success === true){ that.phoneNumber = serverResponse.data.phoneInfo.purePhoneNumber; // 假设返回的数据格式如此 } else { console.error('获取手机号失败'); } } }); } }); // 如果是新版，则还需要单独发起一次仅针对手机号的授权流程 // 这里省略具体实现细节，因为这取决于具体的业务场景和前后端协作方式 } else { console.warn('登录失败！' + loginRes.errMsg); } } }); } } } </script> ``` 上述代码展示了如何通过 `uni.login()` 方法来获取用户的临时登陆凭证（即 code），并通过 `wx.getWeRunData()` 接口模拟实际操作中可能涉及的具体步骤，如收集加密数据等。需要注意的是，真正的手机号解析依赖于服务端完成，因此客户端只负责传递必要的信息给服务端[^1]。 对于新版本而言，确实存在需要分别取得两种不同类型的授权码的情况——一种用于基本的身份认证（得到 openid），另一种专门用来换取手机号。这种情况下，前端需按照文档指引调整相应 API 的调用顺序及参数设置[^3]。