https://github.com/hbxtben/zzplock
H5 手势解锁组件(多终端适配)
https://github.com/hbxtben/zzplock
h5-lock javascript web-component web-mobile
Last synced: 8 months ago
JSON representation
H5 手势解锁组件(多终端适配)
- Host: GitHub
- URL: https://github.com/hbxtben/zzplock
- Owner: hbxtben
- Created: 2017-03-27T16:28:36.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-28T17:41:18.000Z (about 9 years ago)
- Last Synced: 2025-01-30T19:07:07.375Z (over 1 year ago)
- Topics: h5-lock, javascript, web-component, web-mobile
- Language: JavaScript
- Homepage: https://hbxtben.github.io/zzplock/test/
- Size: 2.19 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ZZPLock
 
**移动端HTML5手势解锁,使用canvas绘制，提供对Retina屏适配的轻量级插件**
## DEMO
[DEMO](https://hbxtben.github.io/zzplock/test/)(需打开移动端调试工具查看效果)
> DEMO二维码
> gif效果展示
## 简要说明
- 支持密码设置时两次校对
- 支持解码正确错误的验证
- 对外提供良好的扩展接口，包括密码加密方法接口等
- 使用单例模式
- 支持多机型适配
- 通过gulp构建
## 下载方式
```shell
npm install zzplock
```
## 使用方法
### 1.引入css,js
```
```
### 2.初始化对象及配置信息
#### 配置接口
```javascript
var lock = new ZZPLock({
/**
* pwdResultMsg 必填配置项，设置一次滑动后不同状态时的界面效果
* msgState:
* 'success'-验证正确
* 'error'-验证错误 'storeSuccess'-设置密码二次确认正确
* 'storeError'-设置密码二次确认错误
* 'shortPwd'-设置密码过短
* 'repeatPwd'-重设密码提示
*/
pwdResultMsg: function(msgState){}
/**
* showMsg 必填配置项，设置不同解锁状态的界面
* state：
* 2-解锁界面
* 1-设置密码的二次验证界面
* default-设置密码的界面
*/
showMsg: function(state){}
/**
* pswEncript 必填配置项,设置密码加密算法
*/
pswEncript: function(){}
//其他配置项,展示的为默认值
nodeType : 3 //n*n的点阵
width : 300 //主canvas宽度
height : 300 //主canvas高度
ifAdapter : 1 //是否适配
backColor : "#305066" //背景色
preColor : "#cfe6ff" //滑动前圆圈颜色
fillColor : "#2b4a5f" //滑动时圆圈填充色
canvasName : "#canvas" //主画布ID
hintName : "#hint" //密码提示画布（canvas）ID
//界面html模板（主画布中的宽度和高度需写成{width}和{height}）
template : ''
+ '
'
+ '设置解锁图案
'
+ ''
+ '设置密码',
});
```
### 3.对外函数接口
#### changePsw 重置密码
重置密码并进行页面的刷新
```javascript
lock.changePsw();
```
#### destory 销毁组件
删除canvas节点，并置空组件对象
```javascript
lock.destory();
```