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就登录,登录也是封装了,就不用看了

相关推荐
阿懂在掘金2 分钟前
早点下班(Vue2.7版):旧项目也能少写 40%+ 异步代码
前端·vue.js·开源
Mintopia3 分钟前
Web性能测试流程全解析:从概念到落地的完整指南
前端·性能优化·测试
Qinana25 分钟前
第一次用向量数据库!手搓《天龙八部》RAG助手,让AI真正“懂”你
前端·数据库·后端
忆江南25 分钟前
# Flutter Engine、Dart VM、Runner、iOS 进程与线程 —— 深度解析
前端
龙国浪子30 分钟前
从「选中一段」到「整章润色」:编辑器里的 AI 润色是怎么做出来的
前端·人工智能
小码哥_常37 分钟前
Android 开发秘籍:用Tint为Icon动态变色
前端
小码哥_常37 分钟前
从0到1手把手封装Android基类Activity/Fragment,告别重复代码,开发效率直接拉满!
前端
ChoriaKiinweill37 分钟前
不会有人现在还不了解BOM的知识吧? 关于它的一切都在这里!!!
前端
ChoriaKiinweill38 分钟前
我们最爱操纵的DOM是个什么玩意? 关于DOM的知识快速一览!
前端
毛骗导演40 分钟前
万字解析 OpenClaw 源码架构-代理系统(二)
前端·架构