uni-app实现手势登录及绑定微信功能

Myth丶恋晨 2023-05-30 03:45 10阅读 0赞

首先是前端的手势插件下载引用，可以去插件市场搜索，我用的这个  
https://ext.dcloud.net.cn/plugin?id=49  
下载引入就好了。

## 一、手势密码设定功能 ##

<template>
    	<view class="content">
    		<view class="ssmm">
    			<mpvue-gesture-lock :containerWidth="590" :cycleRadius="70" @end="onEnd" :password="password"></mpvue-gesture-lock>
    		</view>
    		<view class="uni-center">{
       {text}}</view>
    	</view>
    </template>
    
    <script>
    	import mpvueGestureLock from '@/components/mpvueGestureLock/indexsz.vue';
    	export default {
    		components: {
    			mpvueGestureLock
    		},
    		data() {
    			return {
    				password: [],
    				text: '请设定手势'
    			}
    		},
    		onLoad() {//禁用页面下滑功能，不然滑动会带动页面
    			document.body.addEventListener('touchmove', bodyScroll, {
    			    passive: false
    			});
    			function bodyScroll(event) {
    			    event.preventDefault();
    			}
    		},
    		methods: {
    			onEnd(data) {
    				var access_token=uni.getStorageSync("access_token");
    				if (this.password.length) {
    					if (this.password.join('') === data.join('')) {
    						this.text = '手势设定完成'
    						this.password = [ ]
    						uni.request({    //设置完调用接口保存手势密码
    							url: getApp().globalData.baseUrl+'/admin/user/updateUserLockpwd',
    						    data: { 
    								userId:uni.getStorageSync("userId"),
    								lockpwd:data.join('-')
    							},
    							method:"PUT",
    						    header: {
    								isToken: false,
    								'TENANT-ID': getApp().globalData.tenantId,
    								'Authorization':'Bearer '+access_token
    						    },
    						    success: (res) => {
    								if(res.data.code==0){
    									uni.showToast({
    										title: '手势设定完成',
    										icon: 'success',
    										mask: true
    									});
    									setTimeout(function() {
    										uni.reLaunch({
    											url:"../fxcp/cpjg/cpjg"
    										})
    									},1000);
    								}
    						    }
    						});
    						
    					} else {
    						this.text = '两次手势设定不一致'
    						this.password = []
    					}
    				} else {
    					this.text = '请确认手势设定'
    					this.password = data//data是密码数字数组
    				}
    			}
    		}
    	}
    </script>
    
    <style>
    	page{
    		height: 100%;
    	}
    	.content{
    		height: 100%;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		align-items: center;
    	}
    	.uni-center{
    		display: flex;
    		justify-content: center;
    		margin-top: 150rpx;
    	}
    </style>

手势密码界面如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]  
设置完就是手势登录功能。

## 二、手势登录 ##

手势登录代码

<template>
    	<view>
    		
    		<view class="logobox">
    			<image class="logo" src="../../../static/ssdl/YH.png"></image>
    			<text class="hyy">欢迎圆合会员</text>
    			<text class="qsr">请您输入您的手势</text>
    		</view>
    		
    		<view class="uni-padding-wrap uni-common-mt">
    			<mpvue-gesture-lock :containerWidth="590" :cycleRadius="70" @end="onEnd" :password="password"></mpvue-gesture-lock>
    		</view>
    		
    		<view class="wjmm">
    			<navigator url="../login" class="btn">
    				<image class="img" src="../../../static/else/qh.png"></image>
    				<view>切换为账号登录</view>
    			</navigator>
    		</view>
    	</view>
    </template>

界面如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]

## 三、调用获取公众号信息接口前往重定向 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]  
获取公众号信息接口调用成功，保存返回的appid和redirectUrl值，跳转重定向链接。重定向链接是后端设置，前端只需要拼接：`window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+encodeURIComponent(redirectUri)+'&response_type=code&scope=snsapi_userinfo&state=ssdl#wechat_redirect'`

## 四、新建空白页处理微信绑定 ##

<template>
    	<view></view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				
    			}
    		},
    		onLoad() {
    			this.getbdwx()
    		},
    		methods: {
    			// 绑定微信
    			getbdwx(){
    				const access_token=uni.getStorageSync("access_token");
    				const ssmm=uni.getStorageSync("ssmm")
    				const url = window.location.href.replace('http://www.rlvs.cn/gzh/', '')
    				const code =url.split("&")[0].replace("?code=","")
    				const state =url.split("&")[1].replace("state=","").substr(0,4)
    				if(state=="ssdl"){//手势登录
    					uni.request({
    						url: getApp().globalData.baseUrl+'/auth/mobile/token/social',
    						data: {
    							mobile:'GZH@'+code,
    							code:ssmm,
    							grant_type:"mobile"
    						},
    						method:"POST",
    						header: {
    							'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
    							isToken: false,
    							'TENANT-ID': getApp().globalData.tenantId,
    							'Authorization':'Basic bHNmdzpsc2Z3'//自定义请求头信息
    						},
    						success:(res)=>{
    							if(res.data.code==1){
    								uni.showModal({
    									content:res.data.msg,
    									showCancel: false
    								});
    							}else{
    								uni.setStorageSync("access_token",res.data.access_token);
    								uni.setStorageSync("refresh_token",res.data.refresh_token);
    								uni.setStorageSync("username",res.data.username);
    								// uni.setStorageSync("password",this.password);
    								uni.setStorageSync("userId",res.data.user_id);
    								uni.showToast({
    									title: '登录成功',
    									icon: 'success',
    									mask: true,
    								});
    								setTimeout(function() {
    									uni.reLaunch({
    										url:"../../../cpzx/index"
    									})
    								},1000);
    								var access_token=uni.getStorageSync("access_token");
    								// 请求是否首次登录
    								uni.request({
    									url: getApp().globalData.baseUrl+'/admin/user/info',
    									data: { },
    									header: {
    										// isToken: false,
    										'TENANT-ID': getApp().globalData.tenantId,
    										'Authorization':'Bearer '+access_token
    									},
    									success:(res)=>{
    										uni.setStorageSync("usertype",res.data.data.sysUser.usertype);
    										uni.setStorageSync("category",res.data.data.sysUser.category);
    										uni.setStorageSync("firstlogin",res.data.data.sysUser.firstlogin);
    										uni.setStorageSync("avatar",res.data.data.sysUser.avatar);
    										uni.setStorageSync("realname",res.data.data.sysUser.realname);
    										uni.setStorageSync("phone",res.data.data.sysUser.phone);
    										uni.setStorageSync("xb",res.data.data.sysUser.xb);
    										// 请求成功,外部用户且首次登录跳转风险测评
    										if(res.data.data.sysUser.firstlogin==1 && res.data.data.sysUser.usertype==1){//1为首次登陆
    											uni.reLaunch({
    												url:"../../pwd/czmm?key=login"
    											})
    										// 不是首次登录，跳转首页
    										}else{
    											uni.showToast({
    												title: '登录成功',
    												icon: 'success',
    												mask: true
    											});
    											setTimeout(function() {
    												uni.reLaunch({
    													url:"../../../cpzx/index"
    												})
    											},1000);
    										}
    									}
    								});
    							}
    						},
    						fail:(res)=>{
    							uni.showModal({
    								content:"失败",
    								showCancel: false
    							});
    						}
    					});
    				}else{//账号密码登录
    					uni.request({
    						url: getApp().globalData.baseUrl+'/mp/gzh/authorize/'+code,
    						data: { },
    						header: {
    							isToken: false,
    							'TENANT-ID': getApp().globalData.tenantId,
    							'Authorization':'Bearer '+access_token
    						},
    						success: (res) => {
    							if(res.data.code==1){
    								uni.showModal({
    									content:"绑定失败",
    									showCancel: false
    								});
    							}else{
    								uni.showToast({
    									title: '绑定成功',
    									icon: 'success',
    									mask: true
    								});
    								setTimeout(function() {
    									uni.reLaunch({
    										url:"../../../cpzx/index"
    									})
    								},1000);
    							}
    						}
    					});
    				}
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

空白页一进入就，获取url中code的参数值，并通过绑定微信接口传过去。绑定成功保存用户信息即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107103938805.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191107100903794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191107104407169.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70