{"id":15022363,"url":"https://github.com/hbxtben/zzplock","last_synced_at":"2025-10-23T14:31:17.988Z","repository":{"id":57407428,"uuid":"86358598","full_name":"hbxtben/zzplock","owner":"hbxtben","description":"H5 手势解锁组件(多终端适配)","archived":false,"fork":false,"pushed_at":"2017-03-28T17:41:18.000Z","size":2296,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-30T19:07:07.375Z","etag":null,"topics":["h5-lock","javascript","web-component","web-mobile"],"latest_commit_sha":null,"homepage":"https://hbxtben.github.io/zzplock/test/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hbxtben.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-27T16:28:36.000Z","updated_at":"2022-04-22T09:03:05.000Z","dependencies_parsed_at":"2022-09-27T10:50:10.908Z","dependency_job_id":null,"html_url":"https://github.com/hbxtben/zzplock","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hbxtben%2Fzzplock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hbxtben%2Fzzplock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hbxtben%2Fzzplock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hbxtben%2Fzzplock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hbxtben","download_url":"https://codeload.github.com/hbxtben/zzplock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237843715,"owners_count":19375191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["h5-lock","javascript","web-component","web-mobile"],"created_at":"2024-09-24T19:57:50.678Z","updated_at":"2025-10-23T14:31:17.382Z","avatar_url":"https://github.com/hbxtben.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ZZPLock \n\n![](https://travis-ci.org/hbxtben/zzplock.svg?branch=master)  ![](https://img.shields.io/badge/npm-v0.1.1-blue.svg)  \n**移动端HTML5手势解锁,使用canvas绘制，提供对Retina屏适配的轻量级插件**\n\n## DEMO\n[DEMO](https://hbxtben.github.io/zzplock/test/)(需打开移动端调试工具查看效果) \n\u003e DEMO二维码  \n![ercode](https://github.com/hbxtben/zzplock/blob/master/images/zzplock.png)  \n\n\u003e gif效果展示  \n![gif效果展示](https://github.com/hbxtben/zzplock/blob/master/images/zzplock.gif) \n\n## 简要说明\n- 支持密码设置时两次校对\n- 支持解码正确错误的验证\n- 对外提供良好的扩展接口，包括密码加密方法接口等\n- 使用单例模式\n- 支持多机型适配\n- 通过gulp构建\n\n## 下载方式\n```shell\nnpm install zzplock\n```\n\n## 使用方法\n### 1.引入css,js\n```\n\u003cscript type=\"text/javascript\" src=\"../lib/zzpLock.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"../style/css/zzpLock.css\"\u003e\n```\n### 2.初始化对象及配置信息\n#### 配置接口\n```javascript\nvar lock = new ZZPLock({\n   /**\n   * pwdResultMsg 必填配置项，设置一次滑动后不同状态时的界面效果 \n   * msgState: \n   * 'success'-验证正确 \n   * 'error'-验证错误 'storeSuccess'-设置密码二次确认正确\n   * 'storeError'-设置密码二次确认错误\n   * 'shortPwd'-设置密码过短\n   * 'repeatPwd'-重设密码提示\n   */\n   pwdResultMsg: function(msgState){}\n    \n   /**\n   * showMsg 必填配置项，设置不同解锁状态的界面\n   * state：\n   * 2-解锁界面\n   * 1-设置密码的二次验证界面\n   * default-设置密码的界面\n   */\n   showMsg: function(state){}\n   \n   /**\n   * pswEncript 必填配置项,设置密码加密算法\n   */\n   pswEncript: function(){}\n   \n   //其他配置项,展示的为默认值\n    nodeType   : 3          //n*n的点阵\n    width      : 300        //主canvas宽度\n    height     : 300        //主canvas高度\n    ifAdapter  : 1          //是否适配\n    backColor  : \"#305066\"  //背景色\n    preColor   : \"#cfe6ff\"  //滑动前圆圈颜色\n    fillColor  : \"#2b4a5f\"  //滑动时圆圈填充色\n    canvasName : \"#canvas\"  //主画布ID\n    hintName   : \"#hint\"    //密码提示画布（canvas）ID\n    \n    //界面html模板（主画布中的宽度和高度需写成{width}和{height}）\n    template   :   '\u003ccanvas id=\"hint\" width=100 height=100\u003e\u003c/canvas\u003e'\n                 + '\u003cdiv id=\"myImage\"\u003e\u003c/div\u003e'\n                 + '\u003ch4 id=\"title\" class=\"title\"\u003e设置解锁图案\u003c/h4\u003e'\n                 + '\u003ccanvas id=\"canvas\" width={width} height={height}\u003e\u003c/canvas\u003e'\n                 + '\u003ca id=\"changePsw\"\u003e设置密码\u003c/a\u003e',\n});\n```\n### 3.对外函数接口\n#### changePsw 重置密码\n重置密码并进行页面的刷新\n```javascript\nlock.changePsw();\n```\n#### destory 销毁组件\n删除canvas节点，并置空组件对象\n```javascript\nlock.destory();\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhbxtben%2Fzzplock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhbxtben%2Fzzplock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhbxtben%2Fzzplock/lists"}