微信小程序实现手势解锁的示例详解

 更新时间:2022年04月28日 14:32:11   作者:失散多年的哥哥  
手势解锁是生活中常用的解锁方式,本文将通过微信小程序实现手势解锁这一功能,本实例以工具的形式可以嵌入到不同的项目之中,感兴趣的可以了解一下

一、项目展示

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

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

本实例以工具的形式

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

二、设置手势、手势解锁

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();
        }

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

相关文章

  • 用unescape反编码得出汉字示例

    用unescape反编码得出汉字示例

    这篇文章主要介绍了如何用unescape反编码得出汉字,需要的朋友可以参考下
    2014-04-04
  • 在Html中使用Requirejs进行模块化开发实例详解

    在Html中使用Requirejs进行模块化开发实例详解

    在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理。这里就介绍下如何通过requirejs,实现html代码的模块化开发
    2016-04-04
  • javascript把15位身份证转成18的函数

    javascript把15位身份证转成18的函数

    非常不错的,看了这个大家就明白身份证的运算规则了
    2008-10-10
  • 微信小程序实现图片翻转效果的实例代码

    微信小程序实现图片翻转效果的实例代码

    这篇文章主要介绍了微信小程序实现图片翻转效果的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • JS自动跳转手机移动网页的实现方法

    JS自动跳转手机移动网页的实现方法

    本文主要介绍了JS自动跳转手机移动网页的实现方法,可以通过检查 navigator.userAgent 属性来识别用户代理字符串中包含的设备信息,下面就详细的来介绍一下具体用法,感兴趣的可以了解一下
    2024-03-03
  • ES6如何将 Set 转化为数组示例详解

    ES6如何将 Set 转化为数组示例详解

    这篇文章主要为大家介绍了ES6如何将 Set 转化为数组的方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • js实现的简洁网页滑动tab菜单效果代码

    js实现的简洁网页滑动tab菜单效果代码

    这篇文章主要介绍了js实现的简洁网页滑动tab菜单效果代码,可实现简单的鼠标滑过tab标签切换的功能,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • JavaScript中的预解析你了解吗

    JavaScript中的预解析你了解吗

    预解析也叫预声明,是提前解析声明的意思,预解析是针对变量和函数来说的,本文将通过一些简单的示例带大家了解一下JS中预解析的具体使用,需要的可以参考一下
    2023-05-05
  • JavaScript实现读取条码中的二进制数据

    JavaScript实现读取条码中的二进制数据

    条码是一种以机器可读的可视形式表示数据的方法,我们可以从条码获取二进制数据,并通过不同方法去读码,下面我们就来看看如何实现读取条码中的二进制数据吧
    2024-03-03
  • raphael.js绘制中国地图 地图绘制方法

    raphael.js绘制中国地图 地图绘制方法

    在本文中给大家分享如何使用raphael.js来完成地图交互,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能,需要的朋友可以参考下
    2014-02-02

最新评论