微信小程序实现之手势锁功能实例代码-创新互联

设计思路流程图

1、全局常量

constructor(page,opts){
  // 初始化全局常量数据
  this.page = page;
  this.width = opts.width || 300;
  this.height = opts.height || 300;
  this.canvasId = opts.canvasId || 'lock';
  this.type = opts.type || 3;
  this.cleColor = opts.cleColor || 'rgba(0,136,204,1)';
  this.size = this.width / this.type / 2;//坐标点之间的半间距
  this.R = this.size / 2;//外圆半径
  this.r = this.size / 4;//內圆半径
  // 判断是否在缓存中存在密码，如果存在，直接进行第二步骤：解码，如果不存在，进行初始化，设置密码
  this.pswObj = wx.getStorageSync('password') ? {
   step: 2,
   password: JSON.parse(wx.getStorageSync('password'))
  } : { step: 0 };
  // 启动手势锁初始化
  this.init();
 }