微信小程序如何实现手势解锁功能，有哪些具体步骤和技巧？

本文共计758个文字，预计阅读时间需要4分钟。

目录

一、项目展示

二、设置手势、手势解锁

三、手势重置

一、项目展示

这是一款简单实用的手势解锁工具。手势解锁是当下常用的一种解锁方式，本工具的形状可嵌入到不同的项目中。

二、设置手势、手势解锁手势解锁是当前最常用的解锁方式之一。以下是如何使用本工具进行手势解锁的示例：

1. 进入设置

2.选择手势解锁

3.按提示设置手势

4.完成后，即可使用手势解锁

三、手势重置

如果您需要重置手势解锁，可以按照以下步骤操作：

1. 进入设置

2.选择手势解锁

3.点击重置手势

4.按提示重新设置手势

本工具提供了一种便捷的手势解锁方式，适用于各种项目。

目录

• 一、项目展示
• 二、设置手势、手势解锁
• 三、手势重置

一、项目展示

这是一款简单实用的手势解锁工具

手势解锁是当下常用的解锁方式

本实例以工具的形式

可以嵌入到不同的项目之中

二、设置手势、手势解锁

wxlocker.prototype.storePass = function(psw,cb) {// touchend结束之后对密码和状态的处理 if (this.pswObj.step == 1) {//step==1表示还没有设置密码状态 if (this.checkPass(this.pswObj.fpassword, psw)) { this.pswObj.step = 2; this.pswObj.spassword = psw; this.resetHidden = false; this.title = "密码保存成功"; this.titleColor = "succ"; this.drawStatusPoint('#09bb07'); wx.setStorageSync('passwordxx', JSON.stringify(this.pswObj.spassword)); // wx.setStorageSync('chooseType', this.chooseType); } else { this.title = "两次绘制不一致，重新绘制"; this.titleColor = "error"; this.drawStatusPoint('#e64340'); delete this.pswObj.step; } } else if (this.pswObj.step == 2) { if (this.checkPass(this.pswObj.spassword, psw)) { this.title = "解锁成功"; this.titleColor = "succ"; this.drawStatusPoint('#09bb07'); cb(); } else { this.title = "解锁失败"; this.titleColor = "error"; this.drawStatusPoint('#e64340'); } } else { if(this.lastPoint.length<4){ this.title="密码过于简单，请至少连接4个点"; this.resetHidden = true; this.titleColor = "error"; return false; }else{ this.pswObj.step = 1; this.pswObj.fpassword = psw; this.titleColor = ""; this.title = "再次输入"; } } }

效果图如下：

手势设置：

手势解锁(成功)：

手势解锁(失败)：

三、手势重置

wxlocker.prototype.updatePassword = function(){//点击重置按钮，重置密码 wx.removeStorageSync("passwordxx"); // wx.removeStorageSync("chooseType"); this.pswObj = {}; this.title="请设置手势密码"; this.resetHidden = true; this.titleColor = ""; this.reset(); }

到此这篇关于微信小程序实现手势解锁的示例详解的文章就介绍到这了,更多相关微信小程序手势解锁内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！