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

相关推荐
心之语歌几秒前
Vue2 data + Vue3 ref/reactive 核心知识点总结
开发语言·前端·javascript
诸葛亮的芭蕉扇3 分钟前
tooltip-position-solution
前端·vue.js·elementui
克里斯蒂亚诺更新20 分钟前
微信小程序调用腾讯地图路线规划-注意点
微信小程序·小程序
LXXgalaxy23 分钟前
`摸鱼决策轮盘`【vue3+ts前端实战小项目】
前端
这是个栗子28 分钟前
关于 TypeScript 的介绍
前端·javascript·typescript
亿元程序员35 分钟前
亿元Cocos小游戏实战合集指南和答疑
前端
开开心心就好38 分钟前
伪装文件历史记录!修改时间的黑科技软件
java·前端·科技·r语言·edge·pdf·语音识别
饼干哥哥43 分钟前
聊了50个AI出海的市场团队,我总结了达人营销的7宗罪
前端
qq_4275060844 分钟前
vscode使用kimi code的简单经验分享
前端·vscode·ai编程
恋猫de小郭1 小时前
Claude Code 源码里有意思设定:伪造、投毒、卧底、封号
前端·人工智能·ai编程