第一章 前言
目前在开发一款微信小程序时,需要用户进行微信登录,可以获取用户的手机号码来作为用户的唯一标识,于是探索获取用户手机号码的方式(当然,通过wx.login来获取code,进而换取用户的openid也是可以的,在小编另两个总结中)
第二章 获取用户手机号
- 步骤1:需要将button组件open-type 的值设置为getPhoneNumber,当用户点击并同意之后,通过@getphonenumber事件获取回调信息;
- 步骤2:将@getphonenumber事件回调中的动态令牌code传到开发者后台(注意这里是前后端合作开发的流程),并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口,消费code来换取用户手机号。每个code有效期为5分钟,且只能消费一次。
获取手机号 | 微信开放文档
- 注:getPhoneNumber返回的code与wx.login返回的code作用是不一样的,不要混用,不然会报错code无效。
- 使用方式:
-- html部分——
</template> <view> <!-- 获取用户手机号 --> <!-- 注意:getUserPhone方法不要用括号,不然拿不到参数!!!! --> <button open-type="getPhoneNumber" class="login_button" @getphonenumber="getUserPhone">获取用户手机号</button> </view></template>
-- js部分——
getUserPhone(e) { const _this = this // 获取到回调信息,需要code(与登录login的code不同) console.log("回调返回的信息:", e) uni.request({ url: 'https://api.weixin.qq.com/cgi-bin/stable_token', method: 'POST', data: { appid: '小程序测试号appid', secret: '小程序测试号密钥', grant_type: 'client_credential' }, success(res) { console.log('获取access_token信息:', res) // 保存access_token的操作,小编这里样例,就直接放在data中了 _this.accessToken = res.data.access_token uni.request({ url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${res.data.access_token}`, method: 'POST', data: { code: e.detail.code // openid: _this.openid (openid非必填,所以不需要先获取用户信息,再获取手机号) }, success(res) { console.log('获取的用户手机号userPhone:', res) } }) } })},
-- 注意1: 这里如果使用小程序的appid和密钥,是会报错没有权限的,问题详情如下:
微信小程序(bug): 获取手机号报错:getPhoneNumber:fail no permission-CSDN博客
-- 注意2:正常开发中我们还需要抠细节,例如:只有获取的回调信息errMsg返回是"getPhoneNumber:ok"表示同意授权才执行逻辑…
取消返回的参数:
-- 实现效果:
允许后,回调返回的信息:
获取的access_token信息 :
获取到的用户手机号: