小程序手势图案锁屏、解锁实现并提供onSuccess等回调

摘要：本文给出了一个小程序手势图案锁屏、解锁实现方案，该方案具有重绘少、屏幕闪烁少，使用简单等优点，并增加了onTouchEnd和onSuccess回调，方便大家进行代码扩展，比如可以在onSuccess回调中获取图案密码，存储到数据库等物理介质。

问题由来：小程序目前登陆逻辑是，首次登陆输入用户密码、口令，认证通过后会绑定微信openid，下次进入时只要是同一个微信号（通常openid一致）就直接进入小程序主页面，无需二次输入密码。这种方式简单、高效，但不是很安全，如你手机借他人用下，他人就可以直接进入小程序操作业务啦，为此，打算进入小程序主页面前增加图案解锁（之前没设置的话，先设置图案密码）。

解决思路：度娘看看，有没拿来可用的？还真有，比如：https://www.jb51.net/article/134021.htm（参考方案），下载了DEMO看下，在模拟器上效果还可以，但是在android真机上，有点泪奔，手没怎么划动呢，屏幕就闪个不停。经考量，参考他的思路，重新实现吧。小程序代码片段，DEMO下载！因编辑器URL不支持wechatide协议，请大家复制 wechatide://minicode/U94hICmE7I9m 到浏览器地址栏即可。

一、图案设置、解锁程序演示图如下，具体请大家下载代码片段体验

二、index页面代码

index.wxml

<view class='page'>
  <view class='hd'>
    <text>{{lockType==1?'图案设置' : '图案解锁'}}</text>
    <text class='c-link' wx:if="{{lockType==1}}" bindtap='reset'>重新设置</text>
    <text class='c-link' wx:if="{{lockType==2}}" bindtap='forget'>忘记密码</text>
  </view>
  <view class='bd'>
    <view class='title'>{{lockMsg}}</view>
    <canvas canvas-id="canvas" class="canvas" bindtouchend="onTouchEnd"
      bindtouchstart="onTouchStart" bindtouchmove="onTouchMove"></canvas>
  </view>
  <view class='ft' style="height:{{ftHeight}}px">
    <scroll-view scroll-y="true" style="height:100%;">
      <view class="box">
        <text>使用说明：</text>
        <text>1) 读取图案密码，密码为空，则进入图案设置模式，反之则进入解锁模式;</text>
        <text>2) 设置模式，点击'重新设置'，取消第一次图案绘制，重新绘制；</text>
        <text>3) 解锁模式，点击'忘记密码'，重置图案密码，重新设置；</text>
      </view>
    </scroll-view>
  </view>
</view>

index.js

const app = getApp()
const Locker = require('../utils/locker.js');

Page({
  data: {
    lockMsg: '请绘制图案'
  },
  onLoad: function () {
    let pwd = wx.getStorageSync('locker_pwd') || '';
    let res = wx.getSystemInfoSync();
    let ftHeight = res.windowHeight - 410;
    let that = this;
    this.setData({ lockType: pwd == '' ? 1 : 2, ftHeight: ftHeight });
    
    //
    this.lock = new Locker(this, {
      id: 'canvas',
      lockType: this.data.lockType,
      onTouchEnd: (e) => {
        // console.log("onTouchEnd: ", e);
      },
      onSuccess: (e) => {
        // console.log("onSuccess: ", e);
        if (e.lockType == "1") {
          console.log("密码设置成功，密码为：", e.lockPwd);
          that.setData({lockType: 2});
          that.lock.changeLockType(2);
        } else {
          console.log("密码解锁成功!");
        }
      }
    });
  },
  reset(e) {
    this.lock.reset();
  },
  forget(e) {
    let that = this;
    wx.showModal({
      content: '确定要重置密码吗?',
      success:(res)=>{
        if(res.confirm) {
          that.setData({lockType: 1});
          that.lock.changeLockType(1);
        }
      }
    })
  }
})

index.wxss

.page{background: #f4f4f4; font-size: 14px;}
.hd{
  padding: 20px; height:20px; line-height: 20px; 
  position: relative; text-align: center;
  margin-bottom: 20px;
}
.c-link{color:#576b95; height: 20px; position:absolute; right:20px; top:20px;}
.title{font-size: 17px; height: 30px; line-height: 30px; text-align: center}
.canvas {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-color: #f4f4f4;
}
.ft{background:#fff; height:30px;}
.box{padding: 15px; display: flex; flex-direction: column}

三、utils/locker.js

/**
 * canvasId: 画布ID, 默认'canvas'
 * lockType: 1--setting, 2--unlock
 * width: 图案区域宽度，px
 * successColor: 图案设置或解锁成功时,划过的圆周线颜色
 * errorColor: 图案设置或解锁失败时,划过的圆周线颜色
 * cleColor: 9个圆点的圆周线颜色
 * cleCenterColor: 9个原点的中心小点颜色，及连接线颜色
 * storageKey: 保存密码的key
 * onTouchEnd(e): 触摸结束回调
 * onSuccess(e): 密码设置成功、解锁成功回调
 */
var Locker = class {
  constructor(page,opt){
    var obj = opt || {};
    
    this.page = page;
    this.width = obj.width || 300;
    this.height = this.width;
    this.canvasId = obj.id || 'canvas';
    this.successColor = obj.successColor || '#00c203';
    this.errorColor = obj.errorColor || '#e64340';
    this.cleColor = obj.cleColor || '#3296fa';
    this.cleCenterColor = obj.cleCenterColor || '#3296fa';
    this.lockType = obj.lockType || 1;  //1->setting, 2->unlock
    this.lockStep = 1;
    this.lockMsg = "请绘制图案";
    this.storageKey = obj.storageKey || 'locker_password';
    this.onTouchEnd = obj.onTouchEnd ? obj.onTouchEnd : function (e) {};
    this.onSuccess = obj.onSuccess ? obj.onSuccess: function(e) {};

    this.init();
  }
  init(){
    // 创建 canvas 绘图上下文（指定 canvasId）
    this.ctx = wx.createCanvasContext(this.canvasId,this);
    this.touchFlag = false;
    this.lastPoint = [];
    //
    this.createCircles();
    // canvas绑定事件
    this.bindEvent();
    //
    this.page.setData({ lockMsg: this.lockMsg });
    //
    if(this.lockType == 2) {  //读取保存的密码
      this.savedPwd = wx.getStorageSync(this.storageKey) || '';
    }
  }
  changeLockType(lockType=1) {
    this.lockType = lockType;
    if (this.lockType == 2) {  //读取保存的密码
      this.savedPwd = wx.getStorageSync(this.storageKey) || '';
    }
    this.reset();
  }
  // 画圆方法
  drawCircle(x, y, color){
    color = color || this.cleColor;
    // 设置边框颜色。
    this.ctx.setStrokeStyle(color);
    // 设置线条的宽度。
    this.ctx.setLineWidth(1);
    // 开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。
    this.ctx.beginPath();
    this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
    this.ctx.closePath();
    // 画出当前路径的边框。默认颜色色为黑色。
    this.ctx.stroke();
    // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
    this.ctx.draw(true);
  }

  // 创建解锁点的坐标，根据canvas的大小（默认300px）来平均分配半径
  createCircles() {
    var n = 3, count = 0;
    // 计算圆半径
    this.r = this.width / ((2 * n + 1) * 2);
    this.arr = [];
    this.restPoint = [];
    var r = this.r;
    // 获取圆心坐标，以及当前圆所代表的数
    for (var i = 0; i < n; i++) {
      for (var j = 0; j < n; j++) {
        count++;
        var obj = {
          x: j * 4 * r + 3 * r,
          y: i * 4 * r + 3 * r,
          index: count
        };
        this.arr.push(obj);
        this.restPoint.push(obj);
      }
    }
    // 清空画布
    this.ctx.clearRect(0, 0, this.width, this.height);
    // 绘制所有的圆
    this.arr.forEach(current => { this.drawCircle(current.x, current.y);});
  }

  // 获取touch点相对于canvas的坐标
  getPosition(e) { 
    return {
      x: e.touches[0].x,
      y: e.touches[0].y
    };
  }

  // 绘制触摸点
  drawPoint(x, y, color) { 
    color = color || this.cleCenterColor;
    this.ctx.setFillStyle(color); // 注意用set方法
    this.ctx.beginPath();
    this.ctx.arc(x, y, this.r / 2, 0, Math.PI * 2, true);
    this.ctx.closePath();
    this.ctx.fill();
    this.ctx.draw(true);
  }
  drawStatusPoint(color) { // 初始化状态线条
    for (var i = 0; i < this.lastPoint.length; i++) {
      this.drawCircle(this.lastPoint[i].x, this.lastPoint[i].y, color);
    }
  }
  drawLine(po1, po2) {
    this.ctx.beginPath();
    this.ctx.lineWidth = 2;
    this.ctx.moveTo(po1.x, po1.y);
    this.ctx.lineTo(po2.x, po2.y);
    this.ctx.stroke();
    this.ctx.closePath();
    this.ctx.draw(true);  
  }
  // 如果po在剩余可用点的圆内，则画触摸点和轨迹线
  drawTrace(po) {
    for (var i = 0; i < this.restPoint.length; i++) {
      var pt = this.restPoint[i];
      if (Math.abs(po.x - pt.x) < this.r && Math.abs(po.y - pt.y) < this.r) {
        this.drawPoint(pt.x, pt.y);
        this.drawLine(this.lastPoint[this.lastPoint.length - 1], pt);
        this.lastPoint.push(pt);
        this.restPoint.splice(i, 1);
        break;
      }
    }
  }

  reset() {
    this.lockStep = 1, this.lastPoint = [], this.lockMsg = "请绘制图案";
    // 绘制圆
    this.createCircles();
    //
    this.page.setData({lockMsg: this.lockMsg});
  }

  getLockPwd() {
    var str = "";
    for(var i = 0; i<this.lastPoint.length; i++) {
      str += this.lastPoint[i].index + "";
    }
    return str;
  }
  bindEvent(){
    var self = this;
    this.page.onTouchStart = function(e){
      console.log("t: ", self.lastPoint);
      if(self.lastPoint.length > 0) return;   // 上次绘制没有清理干净
      var po = self.getPosition(e);
      for (var i = 0; i < self.arr.length; i++) {
        // 坐标是否在圆内？
        if (Math.abs(po.x - self.arr[i].x) < self.r && Math.abs(po.y - self.arr[i].y) < self.r) {
          self.touchFlag = true;
          self.drawPoint(self.arr[i].x, self.arr[i].y);
          self.lastPoint.push(self.arr[i]);
          self.restPoint.splice(i, 1);
          break;
        }
      }
    }

    this.page.onTouchMove = function(e){
      if (self.touchFlag) {
        self.drawTrace(self.getPosition(e));
      }
    }

    this.page.onTouchEnd = function(e){
      let success = false;
      if (self.touchFlag) {
        self.touchFlag = false;
        e.lockType = self.lockType;
        e.lockStep = self.lockStep;
        e.lockPwd = self.getLockPwd();
        self.onTouchEnd(e);
        if(self.lockType == "1") {  // setting pwd
          if(self.lockStep == 1) {
            if(e.lockPwd.length < 4) {
              self.lockMsg = "至少绘制4个及以上点";
            } else {
              self.lockMsg = "请再次绘制图案";
              self.lockPwd = e.lockPwd, self.lockStep++;
            }
          } else {
            if(e.lockPwd == self.lockPwd) {
              self.lockMsg = "图案绘制成功";
              self.drawStatusPoint(self.successColor);
              wx.setStorageSync(self.storageKey,e.lockPwd);
              success = true;
            } else {
              self.drawStatusPoint(self.errorColor);
              self.lockMsg = "两次不一致，请重新绘制";
            }
          }
        } else {  // unlock pwd
          if(e.lockPwd == self.savedPwd) {
            self.lockMsg = "图案解锁成功";
            self.drawStatusPoint(self.successColor);
            success = true;
          } else {
            self.drawStatusPoint(self.errorColor);
            self.lockMsg = "图案错误, 请重新绘制";
          }
        }
        self.page.setData({lockMsg: self.lockMsg});
        setTimeout(function () {
          self.lastPoint = [], self.createCircles();
          if(success) {
            self.onSuccess(e);
          }
        }, 1000);
      }
    }
  }
}
module.exports = Locker;

四、与参考方案比较

首先非常感谢参考方案作者给提供思路，并声明方案无好坏，只有适合与否。本实现方案与参考方案比，有两个显著差异。

1、去掉参考方案轨迹指示线功能，取而代之的是目标点自动吸附，解决屏幕重绘、闪烁问题；

2、增加onTouchEnd和onSuccess回调，图案设置成功或解锁成功都会进行onSuccess回调。