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

相关推荐
平头哥技术团队16 分钟前
Day 16 | 用 ul、ol、li 一个标签,把散资料收成有序的技能清单页
开发语言·前端·html·html5
代码青铜z23 分钟前
不会写代码做小程序,模板开发和AI 编程靠谱吗?创业前先看这 5 件事
前端
小傅哥29 分钟前
Java + DDD,1:1 复刻 Deepseek Harness 项目
前端·后端·ai编程
积硅步致千里37 分钟前
Word 里的 .wmf 其实是 EMF:一次 metafile 转 PNG 排障
前端·后端
mayaairi44 分钟前
Vue2 组件通讯(二):ref、自定义事件与provide/inject实战
前端·javascript·vue.js
开开心心就好1 小时前
PDF图片去水印软件,支持批量处理页面
前端·javascript·人工智能·智能手机·pdf·语音识别
爱敲代码的小杨.1 小时前
【Spring】Spring Web MVC
前端·spring·mvc
是立不是利1 小时前
深入理解JavaScript事件委托
开发语言·前端·javascript
晴天162 小时前
React 版本迭代解析:从15到19 核心差异-Day40
前端·react.js·前端框架
APItesterCris2 小时前
告别人工盯品!借助 Open‑Claw 快速搭建电商商品全自动监控与数据分析系统(完整实操代码)
java·大数据·前端·数据库