uniapp手机号一键登录

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

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

先在onload钩子获取临时code码

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

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

javascript 复制代码
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,调支付接口的时候需要用到,所以存一下

javascript 复制代码
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'
			});
		})
	})
},

获取到用户手机号和openId就登录,登录也是封装了,就不用看了

相关推荐
婷婷婷婷10 分钟前
表格组件封装详解(含完整代码)
前端
晴虹11 分钟前
lecen:一个更好的开源可视化系统搭建项目--页面设计器(表单设计器)--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
前端·后端·低代码
小皮虾16 分钟前
这应该是前端转后端最简单的办法了,不买服务器、不配 Nginx,也能写服务端接口,腾讯云云函数全栈实践
前端·javascript·全栈
码途进化论17 分钟前
Vue3 防重复点击指令 - clickOnce
前端·javascript·vue.js
小二·21 分钟前
从零手写俄罗斯方块(Tetris)——前端工程化实战与性能优化
前端·性能优化
xiaoxue..33 分钟前
高频事件的“冷静剂” 闭包的实用场景:防抖与节流
前端·javascript·面试·html·编程思想
优弧1 小时前
2025 提效别再卷了:当我把 AI 当“团队”,工作真的顺了
前端
.try-1 小时前
cssTab卡片式
java·前端·javascript
怕浪猫1 小时前
2026最新React技术栈梳理,全栈必备
前端·javascript·面试
ulias2121 小时前
多态理论与实践
java·开发语言·前端·c++·算法