在uniapp中实现获取手机一键登录功能

本文章是基于vue2风格下，如使用vue3，请自行根据代码转化

在生命周期onLoad中使用uni.login获取code,解决不能直接获取手机号

当uni.login成功回调后在success回调调用后端接口获取用户openid和session_key

	onLoad() {
		//一打开就请求code，解决第一次不能获取手机号
		var that = this;
		uni.login({
			provider: 'weixin',
			success: res => {
				
				if (res.errMsg == 'login:ok') {
					uni.request({
						url: xxxxxxxxxx
						method: 'xxx',
						data: {
							xxx:xxx
						},
						success: res => {
							openid = res.openid;
							session= res.session_key;
							t
						},
						fail: (err) => {
							console.log('error',err);
						}
					});
				}
			}
		});
	},

在method：创建getPhoneNumber获取用户手机号

getPhoneNumber(e) {
			
			let pc = new WXBizDataCrypt(app.globalData.appid, this.session);
			let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
			this.phone = data.phoneNumber;
			app.globalData.phone=data.phoneNumber
		
			if (this.phone) {
				uni.showToast({
					icon: 'none',
					title: '手机号授权成功'
				});
			
				this.wxLogin();
			}
		},

点击一键登录时触发getPhoneNumber

					<button shape="circle" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="btn">微信一键登录</button>

mehtods中定义wxlogin调用后端登录接口

	wxLogin() {
			let that = this;
		
			uni.request({
				url: xxxx,
				method: 'xxx',
				data: {
					xxxxx:'xxx'
				},
				success: res => {
					// uni.$setStorage('key', res.da, function () {
					//   console.log('数据存储成功')
					// })

					uni.navigateBack()
					
				},
				fail(res) {
					console.log(res)
				}
			});
		},

具体顺序

1. 在load中调用wx.login获取code，并在成功回调中请求后端接口获取openid和session
2. 获得openid和session将会在getPhoneNumber中被使用，当点击一键登录时调用getPhoneNumber（）
3. getPhoneNumber（）获取成功回调后在回调中调用wxlogin接口请求后端返回用户信息

这样一个简单的微信手机一键登录就成功了

！！