uniapp实现图案解锁

引言

这里可以使用uniapp插件市场面uniapp前端手势密码这个组件是基于uniapp 的 canvas 进行封装的。
我基于这个插件编写相对应的逻辑。

手势登录逻辑

• 首先我们获取登陆状态，默认是未登录，没有登录就提示让他绘制图形验证码。
• 在methods中判断链接点数至少是4个点，如果少于4个点就提示他，图形密码至少4个点。
• 然后密码要输入两次，判断他是否是第一次绘制，绘制之后将密码存入本地缓存。

				// 将数组转化为字符串
				this.pass = data.join('')
				// 判断是否为第一次绘制
				if (uni.getStorageSync('passCount', 0) == 0) {
					// 将密码信息直接存入
					uni.setStorageSync('line_pass', this.pass)
					// 将绘制次数存入本地缓存
					uni.setStorageSync('passCount', 1)
					this.tipMsg = "请再次绘制图案"
					return
				}

• 然后判断第二次绘制，第二次绘制与第一次是否一致。如果一致就存入本地缓存。

				// 判断是否为第二次绘制
				if (uni.getStorageSync('passCount', 0) == 1) {
					// 判断两次绘制的是否一致
					if (uni.getStorageSync('line_pass', false) != this.pass) {
						alert("两次绘制的图形验证码不一致")
						return
					}
					// 如果一致
					// 将密码信息直接存入
					uni.setStorageSync('line_pass', this.pass)
					// 将绘制次数存入本地缓存
					uni.setStorageSync('passCount', 2)
					this.isPass = uni.getStorageSync('line_pass', false);
					return
				}

• 然后判断两次密码是否一致，一致就登录到主页。

				// 绘制两次以后，判断和本地缓存里的密码是否一致
				if (this.pass != this.isPass) return alert("图形密码不正确");
				//你的逻辑
				// alert("登录成功")
				if (this.pass = this.isPass) return this.$tab.switchTab('/pages/index');

如果本篇文章对你有所帮助，麻烦您点一个赞，如有需要完整代码请私信我！