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

相关推荐
zhanghaha13142 分钟前
HTML系列教程:3_HTML 基础标签 — 标题、段落、超链接、图像
前端·html
李高钢13 分钟前
C# WPF Prism 进阶(二):区域(Region)与模块化(Module)
java·前端·数据库
xyphf_和派孔明23 分钟前
Vite 与 Webpack 对比及常见面试题
前端·webpack·vite
明月_清风24 分钟前
Pi Agent 深度解析:开源极简终端 AI 编码代理的终极指南
前端·后端·ai编程
fatcoder1 小时前
玩转Nginx 03 — location 匹配规则:让不同的路径各回各家
前端·后端·nginx
HjhIron1 小时前
前端面试高频考点 —— TS 高级类型 & CSS 三列布局
前端
李剑一1 小时前
《牛来》火了?我用ThreeJs实现了一个简易版的,代码全送给你,文章最后附演示效果
前端
世界哪有真情2 小时前
AI 写代码两年多,我发现自己越来越"看不进去"了
前端·后端·ai编程
星栈2 小时前
被 Rust async 纠正的三个异步认知
前端·后端·rust
前端_刘师兄2 小时前
前端开发工程师转FAE工程师路线规划
前端