uniapp手机号一键登录

最新推荐文章于 2024-05-23 01:00:00 发布

藤原拓海_别天神

最新推荐文章于 2024-05-23 01:00:00 发布

阅读量535

点赞数 2

文章标签： uni-app 前端微信小程序

本文链接：https://blog.csdn.net/m0_61604012/article/details/136651359

版权

本文介绍了如何在Uniapp中实现手机号一键登录功能，通过

摘要由CSDN通过智能技术生成

uniapp手机号一键登录，先写个button

<button class="phone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号一键登录</button>

先在onload钩子获取临时code码

onLoad() {
	uni.login({
		provider: 'weixin',
		success: (res) => {
			console.log(res.code);
			this.code = res.code
		},
	})
},

我这里是封装了一下，因为有两个页面用到

Vue.prototype.getBindPhone = function(encryptedData,iv,code,fn) {
	postRequert(url + '/user/getBindPhone', {
		encryptedData: encryptedData,
		iv: iv,
		code: code
	}, (res) => {
		console.log(res.data.data);
		if (res.data.code == 200) {
			let result = res.data.data
			this.$store.state.openId = result.openId
			this.userPhone = result.userPhone
			if (fn) {
				fn();
			}
		}
	})
}

e.detail.encryptedData,e.detail.iv,还有临时code就是我们要传的参数，获取到是用户手机号和openId，调支付接口的时候需要用到，所以存一下

getPhoneNumber(e) {
	if (!this.checked) {
		Toast.fail('请先阅读并勾选服务条款');
		return
	}
	this.getBindPhone(
	e.detail.encryptedData,
	e.detail.iv,
	this.code,()=>{
		this.userLogin(this.userPhone,this.$store.state.openId,()=>{
			uni.redirectTo({
				url: '/pages/home/home'
			});
		})
	})
},