手势解锁
今天又仿了个轮子，前几次用基于微信小程序自家的canvas写了两个小demo，期间真是各种莫名问题，尤其android系统问题比较严重；接下来的demo毋庸置疑，理所当然的还是有bug啦，经测试ios系统和开发工具都是没有问题的，用同事的手机一测，结果悲催了，触摸事件好像有问题.同事是一铁杆米粉，感兴趣的同学可以找找其他类型安卓手机上的问题，顺便帮忙解决一哈啦；前两次的demo感觉不太实用，这次的应该会好点
wxml文件代码：
|
1
2
3
4
5
|
<view class=”lock-box”>
<view class=”lock-title {{titleColor}}”>{{title}}</view>
<view hidden=”{{resetHidden}}” bindtap=”lockreset” class=”lock-reset”>重置</view>
<canvas disable-scroll=”true” class=”lock-cav” bindtouchstart=”touchS” bindtouchmove=”touchM” bindtouchend=”touchE” canvas-id=”locker” style=”width:686rpx;height:686rpx;”></canvas>
</view>
|
js代码：
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
// pages/main/index.js
var wxlocker = require(“../../utils/wxlocker.js”);
Page({
data:{
title:’请设置手势密码’,
resetHidden:false,
titleColor:””
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
wxlocker.lock.init();
this.initState();
},
onReady:function(){
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
//设置提示语与重置按钮
initState:function(){
var resetHidden = wxlocker.lock.resetHidden;
var title = wxlocker.lock.title;
var titleColor = wxlocker.lock.titleColor;
this.setData({
resetHidden:resetHidden,
title:title,
titleColor:titleColor
});
},
touchS:function(e){//touchstart事件绑定
wxlocker.lock.bindtouchstart(e);
},
touchM:function(e){//touchmove事件绑定
wxlocker.lock.bindtouchmove(e);
},
touchE:function(e){//touchend事件绑定
wxlocker.lock.bindtouchend(e,this.lockSucc);
this.initState();
},
lockSucc:function(){//解锁成功的回调函数
console.log(“解锁成功！”);
//do something
},
lockreset:function(){
wxlocker.lock.updatePassword();
this.initState();
}
})
|
