解决微信获取用户授权手机号code码失效问题_如何解决微信获取用户手机号code失效问题

废话不多说，直接上干货

问题产生：

开发小程序时，需要获取用户授权一键登录。
使用 wx.login 返回的code码，加上获取用户授权的手机号等加密信息，传参给后台解密时，一直报错code码失效。

官方说明：

从基础库 2.21.2 开始，对获取手机号的接口进行了安全升级

因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用 button 组件的点击来触发。

官方示例：
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

解决：

亲测 tap 事件比获取授权方法触发优先级更高，即：如果在上述官方示例中绑定单击事件，则会先触发单击事件，再调取用户授权事件。

我是用的 uView 这个UI框架写的，所以写法和微信原生写法稍有不同：

<u-button
	open-type="getPhoneNumber"
	@getphonenumber="getPhoneNumber"
	@click="beforeGet"
>
	一键登录
</u-button>
1
2
3
4
5
6
7

data中声明暂存code的变量：

data() {
	return {
		wxCode: '',
	};
},
1
2
3
4
5

重点来了，methods中事件操作：

// 获取登录code
beforeGet() {
	wx.login({
		success: res => {
			if (res.code) {
				this.wxCode = res.code;
			} else {
				console.log('登录失败！' + res.errMsg);
			}
		}
	});
},

// 获取用户授权
getPhoneNumber(e) {
	if (e.detail.code) {
		console.log('用户授权成功', e);
		// 这里用上面取到的 this.wxCode 请求接口
	} else {
		console.log('用户拒绝授权');
	}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

上述方法亲测有效！感觉比其他方法例如：调用两次 wx.login 什么的要巧妙的多，赶快用起来吧！！！