小程序前端获取手机号码

小程序前端获取手机号码

正常开发中，前端通过getUserInfo来获取用户的code，并且在用户点击授权获取手机号码的按钮后，将encryptedData提交给后端，后端通过openid及encryptedData来解密手机号码信息。
因为本项目无后端的特殊开发情况，现在这部分工作在前端完成。
注：前端使用uni-app框架，如果使用小程序原生开发，则将代码中的方法替换为原生方法。

1.页面onload时获取code，并通过code请求微信api获取openid及session_key，在解密手机号码中会使用到。

onLoad() {
	//一打开就请求code
	var that = this;
	uni.login({
		provider: 'weixin',
		success(res) {
			that.code = res.code;
			that.getOpenid(false);
		}
	})
},
methods: {
	// 获取openid
	getOpenid(callBackfn,obj){
		uni.request({
			url: 'https://api.weixin.qq.com/sns/jscode2session',
			method: 'GET',
			data: {
				appid: this.$appid, //你的小程序的APPID  
				secret: this.$secret, //你的小程序的secret,  
				js_code: this.code, //wx.login 登录成功后的code  
				grant_type: 'authorization_code',
			},
			success: (cts) => { // 换取成功后 暂存这些数据 留作后续操作  
				this.openId = cts.data.openid //openid 用户唯一标识  
				this.session_key = cts.data.session_key //session_key  会话密钥  
				if(callBackfn && obj){
					callBackfn(obj);
				}
			}
		})
	},
}

2.用户点击获取手机号码按钮，拿到encryptedData，在这块需要注意一下，code的获取一定要在getphone之前，要不可能会解密报错。

按钮：
<button
	open-type="getPhoneNumber"
	@getphonenumber="getphone"
>一键获取</button>

方法：
//获取手机号
getphone(e) {
	if (!e.detail.iv) {
		uni.showToast({
			title: '获取手机号失败',
			icon: 'none'
		})
		return;
	}
	var that = this;
	//验证code值是否过期
	uni.checkSession({
		success(val) {
			if (val.errMsg == 'checkSession:ok') {
				var obj = {
					code: that.code,
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				}
				that.decryptPhone(obj);
			} else {
				uni.login({
					provider: 'weixin',
					success(res) {
						let code = res.code;
						var obj = {
							code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData
						}
						that.getOpenid(that.decryptPhone,obj);
					}
				})
			}
		}
	})

},

3.解密手机号码需要解密文件WXBizDataCrypt，下载地址：服务端获取开放数据

import WXBizDataCrypt from '@/util/WXBizDataCrypt.js'
//解密手机号
decryptPhone(obj) {
	let pc = new WXBizDataCrypt(this.$appid, this.session_key);
	let data = pc.decryptData(obj.encryptedData, obj.iv);
	console.log('data:',data);
},