手势解锁是app上常见的解锁方式，相比输入密码方式操作起来要方便许多。下面展示如何基于微信小程序实现手机解锁。最终实现效果如下图: 

整个功能基于canvas实现，首先添加画布组件，并设定样式

.gesture-lock {
margin: 100rpx auto;
width: 300px;
height: 300px;
background-color: #ffffff;
}

Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">手势解锁实现代码在gesture_lock.js中(完整源码地址见末尾)。

Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">Box-sizing: border-Box;">初始化

函数
}

Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">主要设置一些参数，如canvas的长宽，canvas的context，手势锁的个数(3乘3, 4乘4)，手势锁的颜色，手势滑动结束时的回调函数等。并计算出手势锁的半径。

Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">Box-sizing: border-Box;">计算每个手势锁的圆心位置

Box-sizing: border-Box; color: rgb(63, 63, 63); white-space: normal;">绘制手势锁
Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">接下来就是识别用户的滑动行为，判断用户划过了哪些圆圈，进而识别出用户的手势。
Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">Box-sizing: border-Box;">在Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">touchstart和Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">touchmove事件中检测触发并更新画布
 1){
this.touchState = "unTouch";
return;
}
this.touchState = "startTouch";
this.checkTouch(e);
let point = {x:e.touches[0].x, y:e.touches[0].y};
this.drawCanvas(this.checkColor, point);
}

onTouchMove(e) {
if (e.touchState === "unTouch") {
return;
}
if (e.touches.length > 1){
this.touchState = "unTouch";
return;
}
this.checkTouch(e);
let point = {x:e.touches[0].x, y:e.touches[0].y};
this.drawCanvas(this.checkColor, point);
}
Box-sizing: border-Box; color: rgb(63, 63, 63); white-space: normal;">检测用户是否划过某个圆圈
Box-sizing: border-Box; color: rgb(63, 63, 63); white-space: normal;">更新画布
 1) {
 let lastPoint = this.checkPoints[0];
 for (let i = 1; i < this.checkPoints.length; i++) {
 this.drawLine(lastPoint, this.checkPoints[i], color);
 lastPoint = this.checkPoints[i];
 }
}
//绘制最后一个识别锁和当前触摸点之间的线段
if (this.lastCheckPoint && point) {
this.drawLine(this.lastCheckPoint, point, color);
}
this.ctx.draw(true);
}
Box-sizing: border-Box; color: rgb(63, 63, 63); white-space: normal;">当用户滑动结束时调用回调函数并传递识别出的手势
Box-sizing: border-Box; color: rgb(63, 63, 63); white-space: normal;">重置和显示手势错误
Box-sizing: border-Box; color: rgb(63, 63, 63); white-space: normal;">如何调用方法中创建lock对象并在用户触摸事件中调用相应方法
调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
that.update()
})
},
onTouchStart: function (e) {
this.lock.onTouchStart(e);
},
onTouchMove: function (e) {
this.lock.onTouchMove(e);
},
onTouchEnd: function (e) {
this.lock.onTouchEnd(e);
}
Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">源码地址:Box-sizing: border-Box; color: rgb(12, 137, 207);">https://github.com/zjxfly/wx-gesture-lock/
Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">hello, 我是疯狂早茶，懂点设计，懂点产品，编程之家一枚，欢迎互联网技术，产品从业者，爱好者关注交流。我的微信公众号crazytea1,欢迎关注