微信小程序开发教程-手势解锁

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

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

<!--index.wxml-->
<view class="container">
  <canvas canvas-id="id-gesture-lock" class="gesture-lock" bindtouchstart="onTouchStart"
    bindtouchmove="onTouchMove" bindtouchend="onTouchEnd"></canvas>
</view>

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

手势解锁实现代码在gesture_lock.js中(完整源码地址见末尾)。

初始化

    constructor(canvasid, context, cb, opt){
        this.touchPoints = [];
        this.checkPoints = [];
        this.canvasid = canvasid;
        this.ctx = context;
        this.width = opt && opt.width || 300; //画布长度
        this.height = opt && opt.height || 300; //画布宽度
        this.cycleNum = opt && opt.cycleNum || 3;
        this.radius = 0;  //触摸点半径
        this.isParamOk = false;
        this.marge = this.margeCircle = 25; //触摸点及触摸点和画布边界间隔
        this.initColor = opt && opt.initColor || '#C5C5C3';   
        this.checkColor = opt && opt.checkColor || '#5AA9EC';
        this.errorColor = opt && opt.errorColor || '#e19984';
        this.touchState = "unTouch";