iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现手势解锁的示例详解
  • 535
分享到

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

2024-04-02 19:04:59 535人浏览 薄情痞子
摘要

目录一、项目展示二、设置手势、手势解锁三、手势重置一、项目展示 这是一款简单实用的手势解锁工具 手势解锁是当下常用的解锁方式 本实例以工具的形式 可以嵌入到不同的项目之中 二、设置

一、项目展示

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

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

本实例以工具的形式

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

二、设置手势、手势解锁

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

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

--结束END--

本文标题: 微信小程序实现手势解锁的示例详解

本文链接: https://www.lsjlt.com/news/147651.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现手势解锁的示例详解
    目录一、项目展示二、设置手势、手势解锁三、手势重置一、项目展示 这是一款简单实用的手势解锁工具 手势解锁是当下常用的解锁方式 本实例以工具的形式 可以嵌入到不同的项目之中 二、设置...
    99+
    2024-04-02
  • 微信小程序怎么实现手势解锁
    本文小编为大家详细介绍“微信小程序怎么实现手势解锁”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么实现手势解锁”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、项目展示这是一款简单实用的手势解锁工具...
    99+
    2023-06-30
  • 微信小程序实现狼人杀小游戏的示例详解
    目录一、项目展示二、首页三、游戏页四、特殊角色五、源码一、项目展示 狼人杀是一款多人参与的,通过语言描述推动、较量口才和分析判断能力的策略类桌面游戏 玩家人数适于4-18人参与 主要...
    99+
    2024-04-02
  • 微信小程序使用ECharts的示例详解
    目录安装 ECharts 组件使用 ECharts 组件图表延迟加载echarts-for-weixin 是 ECharts 官方维护的一个开源项目,提供了一个微信小程序组...
    99+
    2024-04-02
  • php微信小程序解包过程实例详解
    这个解包只能看个大概 1.找到小程序压缩包 1.1、手机root或安装模拟器(我用的是夜神) 1.2、在模拟器上安装微信(用android5系统的模拟器,低版本小程序容易打不开) 1...
    99+
    2024-04-02
  • 微信小程序如何实现手势图案锁屏功能
    这篇文章给大家分享的是有关微信小程序如何实现手势图案锁屏功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。效果图WXML<view class="con...
    99+
    2024-04-02
  • 微信小程序计算器实例详解
    微信小程序计算器实例,供大家参考,具体内容如下 index.wxml <view class="content"> <view class="num"...
    99+
    2024-04-02
  • 微信小程序实现手写签名的示例代码
    目录1.效果图2.相关代码canvas代码js相关在微信小程序上实现手写签名,获取canvascontext新版本和旧版本有点坑,新版本在获取canvas后如果页面有滑动,则签名坐标...
    99+
    2024-04-02
  • uniapp微信小程序强制更新解决示例详解
    目录前言解决办法前言 微信小程序发完正式版后,别人不是马上就能同步收到的,搞得很复杂,还是上个版本 那咋办捏 解决办法 从uni官网找到了一个api ,可以弹窗强制更新,原理应该是本...
    99+
    2022-11-13
    uniapp微信小程序强制更新 uniapp解决强制更新
  • 微信小程序接入微信支付实现过程详解
    目录一、基本介绍二、配置信息三、编码实现四、流程总结一、基本介绍 1、支付场景:点击支付按钮唤起微信支付弹窗,输入正确密码后完成支付。 2、基本流程:点击支付按钮首先生成一个订单,然...
    99+
    2022-12-26
    小程序接入微信支付 微信小程序微信支付
  • 实现微信小程序中的手势操作效果
    实现微信小程序中的手势操作效果,需要具体代码示例随着微信小程序的不断发展,手势操作已经成为了许多小程序中常见的功能。手势操作为用户提供了更加直观、便捷的操作方式,使用户体验更为流畅。下面将介绍如何在微信小程序中实现手势操作效果,并提供具体的...
    99+
    2023-11-21
    手势操作 微信小程序 实现
  • 微信小程序骨架屏的实现示例
    目录什么是骨架屏 小程序中骨架屏的生成方式 引入方法 显示与隐藏 为了优化用户体验,骨架屏一直是开发者比较喜欢的表现方式,也就是首屏占位的一种表现方式,不会让浏览者因为长时间的等待而...
    99+
    2024-04-02
  • 微信小程序实现分页查询详解
    目录创建自定义连接器云开发介绍分页实现思路使用连接器为什么要自定义分页功能日常小程序经常需要分页查询的功能,本篇我们讲解一下低代码中如何实现分页查询的功能。要自己开发分页功能,可以先...
    99+
    2022-11-13
    微信小程序分页查询 小程序分页功能
  • 微信小程序movable-view的可移动范围示例详解
    目录前言重新认识movable-area和movable-viewmovable-area和movable-view的一方完全包含另一方movable-area与movable-vi...
    99+
    2024-04-02
  • 微信小程序中的轮播图实现示例
    目录1.scroll-view 组件的基本使用2.swiper 和 swiper-item 组件的基本使用3.text 组件的基本使用4.rich-text 组件的基本使用1.scr...
    99+
    2022-12-22
    小程序轮播图 微信小程序轮播图
  • 微信小程序虚拟列表的实现示例
    目录前言分析初始渲染方法初步优化进一步优化方法二前言 大部分小程序都会有这样的需求,页面有长列表,需要下拉到底时请求后台数据,一直渲染数据,当数据列表长时,会发现明显的卡顿,页面白...
    99+
    2024-04-02
  • 微信小程序实现登录界面示例
    本文实例为大家分享了微信小程序实现登录界面的具体代码,供大家参考,具体内容如下 注:这里使用的是原生微信小程序 使用wxss和wxml index.wxml文件中代码 <vie...
    99+
    2024-04-02
  • 微信小程序微信登录的实现方法详解(JAVA后台)
    目录1. 前提2. 开发流程2.1 小程序端2.2 Java后端接口总结官方文档:https://developers.weixin.qq.com/miniprogram/dev/f...
    99+
    2024-04-02
  • 微信小程序实现手写板
    本文实例为大家分享了微信小程序实现手写板的具体代码,供大家参考,具体内容如下 <!-- wxml --> <view class="hxt-flex-column...
    99+
    2024-04-02
  • 微信小程序的示例分析
    这篇文章主要介绍微信小程序的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!未来的发展趋势未来的发展趋势是一切触手可及。比如去餐馆吃饭,扫一扫二维码就可以看菜单、点菜、付款;到公交站台,扫一扫二维码就知道有哪些...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作