申明：本篇文章我只改動了，并非原創

1. 首先進行頁面布局，wxml文件代碼：

   <view class="lock-box">
   <view class="lock-title {{titleColor}}">
   {{title}}
   </view>
   <view hidden="{{resetHidden}}" bindtap="lockreset" class="lock-reset">重置1. -
   </view>
   <canvas disable-scroll="true" class="lock-cav" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" canvas-id="locker" style="width:686rpx;height:686rpx;">
   </canvas>
   </view>

   這里需要對解鎖提示語{{title}}，解鎖提示語顏色{{titleColor}}，重置按鈕的顯示隱藏{{resetHidden}}進行動態數據綁定；然后對canvas進行三個touch事件綁定；重要：一定要設置disable-scroll=”true” 屬性，此屬性是當手指在canvas上觸摸時，當前頁面（page）不會被拖拽，不然就沒法正常繪圖了，而且這里必須要用bindXXX,用。catchXXX還是會被拖拽，而且三種事件都要加上

   1. 主頁js代碼
      // 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
   });
   },
   //touchstart事件綁定
   touchS:function(e){
   wxlocker.lock.bindtouchstart(e);
   },
   //touchmove事件綁定
   touchM:function(e){
   wxlocker.lock.bindtouchmove(e);
   },
   //touchend事件綁定
   touchE:function(e){
   wxlocker.lock.bindtouchend(e,this.lockSucc);
   this.initState();
   },
   //解鎖成功的回調函數
   lockSucc:function(){
   console.log(“解鎖成功！”);
   //do something
   },
   lockreset:function(){
   wxlocker.lock.updatePassword();
   this.initState();
   }
   })

2. wxlocker.js主要代碼部分：
   var wxlocker = function(obj){
   // 33的圓點格子
   this.chooseType = 3;
   };
   創建wxlocker對象，并設置屬性chooseType，代表繪制nn的圓圈；
   wxlocker.prototype.drawPoint = function() {
   // 初始化圓心
   for (var i = 0 ; i < this.lastPoint.length ; i++) {
   this.ctx.setFillStyle(‘#10AEFF’);
   this.ctx.beginPath();
   this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y,
   this.r / 2, 0, Math.PI * 2, true);
   this.ctx.closePath();
   this.ctx.fill();
   }
   }
   wxlocker.prototype.drawStatusPoint = function(type) {
   // 設置手指經過的圓圈顏色，type為色值
   for (var i = 0 ; i < this.lastPoint.length ; i++) {

   this.ctx.setStrokeStyle(type);
   this.ctx.beginPath();
   this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, 
   this.r, 0, Math.PI * 2, true);
   this.ctx.closePath();
   this.ctx.stroke();
   

   }
   wx.drawCanvas({

    canvasId: "locker",
    actions: this.ctx.getActions(),
    reserve:true
   

   });
   }
   wxlocker.prototype.drawLine = function(po, lastPoint) {
   // 繪制線條軌跡
   this.ctx.beginPath();
   this.ctx.setLineWidth(1);
   this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y);
   for (var i = 1 ; i < this.lastPoint.length ; i++) {

      this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);
   

   }
   this.ctx.lineTo(po.x, po.y);
   this.ctx.stroke();
   this.ctx.closePath();

}
詳細最新代碼：
https://github.com/demi520/wxapp-lock