第一章 前言
目前在开发一款微信小程序时,需要用户进行微信登录,可以获取用户的手机号码来作为用户的唯一标识,于是探索获取用户手机号码的方式(当然,通过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信息 :
获取到的用户手机号: