微信小程序开发实战教程之手势解锁攻略

背景介绍

在微信小程序开发中，手势解锁是一个非常实用的功能，例如在支付页面上，用户需要输入手势密码才能完成支付等操作。本攻略将介绍如何实现手势解锁的功能及其相关实现步骤。

实现步骤

手势解锁的实现步骤如下：

绘制手势密码锁屏界面，可使用canvas标签绘制，使用wx.createCanvasContext方法获取canvas的上下文
在手势解锁界面中监听手指的触控事件，包括touchstart，touchmove，touchend等事件
根据绘制手指轨迹进行密码验证
保存密码，下次打开手势解锁页面时直接到密码验证

接下来我们依次实现上述四个步骤。

第一步：绘制手势密码锁屏界面

<canvas id="gestureLock" class="canvas"></canvas>

const ctx = wx.createCanvasContext('gestureLock');

/*绘制圆形*/
function drawRound(x, y, r, f) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI, true);
  ctx.fillStyle = f;
  ctx.fill();
  ctx.closePath();
}

/*绘制线段*/
function drawLine(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  ctx.closePath();
}

Page({
  onLoad: function () {
    /*获取canvas的位置及大小*/
    const query = wx.createSelectorQuery();
    query.select('#gestureLock').boundingClientRect();
    query.exec(function (res) {
      const rect = res[0];
      const radius = rect.width / (3 + 4 * Math.sqrt(2)); // 计算圆半径
      const roundList = []; // 圆心坐标列表

      /*初始化圆心列表*/
      for (let i = 0; i < 9; i++) {
        const x = (i % 3 + 1) * rect.width / 4;
        const y = Math.floor(i / 3) * rect.width / 4 + rect.height / 5;
        roundList.push({ x, y });
      }

      /*绘制圆形*/
      roundList.forEach(function (round) {
        drawRound(round.x, round.y, radius, '#FFF');
      });
    });
  }
})

第二步：监听手指的触控事件

Page({
  data: {
    touchRoundList: [], // 触摸到的圆心列表
  },
  touchStart: function (e) {
    /*触摸开始*/
  },
  touchMove: function (e) {
    /*触摸移动*/
  },
  touchEnd: function (e) {
    /*触摸结束*/
  },
})

在以上代码中，我们定义了touchStart，touchMove和touchEnd方法，同时在页面data中定义了一个touchRoundList列表，用于保存当前触摸到的圆心点。在touchStart方法中，我们需要获取当前触摸点距离canvas左上角的相对坐标，然后判断当前触摸到的圆心点是否在列表中；在touchMove方法中，我们需要根据当前触摸到的点，绘制出当前手指移动轨迹；在touchEnd方法中，我们需要保存手势密码，并进行密码验证。

第三步：根据绘制手指轨迹进行密码验证

例如我们可以通过实现以下方法，根据手势轨迹计算当前手势密码是否正确：

function checkPassword(touchRoundList, passwordList) {
  if (touchRoundList.length !== passwordList.length) {
    return false;
  } else {
    for (let i = 0; i < passwordList.length; i++) {
      if (touchRoundList[i].index !== passwordList[i]) {
        return false;
      }
    }
    return true;
  }
}

第四步：保存密码，下次打开手势解锁页面时直接到密码验证

我们可以通过wx.setStorageSync方法将手势密码保存在本地缓存中，下次打开手势解锁页面时从本地缓存中读取手势密码。

/*保存密码*/
const passwordList = [1, 2, 3, 4, 5, 6];
wx.setStorageSync('passwordList', passwordList);

/*读取密码*/
const passwordList = wx.getStorageSync('passwordList');

示例说明

示例1 ：绘制手势密码锁屏界面

我们可以通过绘制圆心列表实现手势密码锁屏界面，代码如下：

/*绘制圆形*/
function drawRound(x, y, r, f) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI, true);
  ctx.fillStyle = f;
  ctx.fill();
  ctx.closePath();
}

/*绘制线段*/
function drawLine(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  ctx.closePath();
}

Page({
  onLoad: function () {
    /*获取canvas的位置及大小*/
    const query = wx.createSelectorQuery();
    query.select('#gestureLock').boundingClientRect();
    query.exec(function (res) {
      const rect = res[0];
      const radius = rect.width / (3 + 4 * Math.sqrt(2)); // 计算圆半径
      const roundList = []; // 圆心坐标列表

      /*初始化圆心列表*/
      for (let i = 0; i < 9; i++) {
        const x = (i % 3 + 1) * rect.width / 4;
        const y = Math.floor(i / 3) * rect.width / 4 + rect.height / 5;
        roundList.push({ x, y });
      }

      /*绘制圆形*/
      roundList.forEach(function (round) {
        drawRound(round.x, round.y, radius, '#FFF');
      });
    });
  }
})

示例2 ：密码验证实现

我们在手势解锁结束事件中，调用以下方法实现手势密码验证：

function checkPassword(touchRoundList, passwordList) {
  if (touchRoundList.length !== passwordList.length) {
    return false;
  } else {
    for (let i = 0; i < passwordList.length; i++) {
      if (touchRoundList[i].index !== passwordList[i]) {
        return false;
      }
    }
    return true;
  }
}

Page({
  data: {
    touchRoundList: [], // 触摸到的圆心列表
  },
  touchEnd: function (e) {
    const touchRoundList = this.data.touchRoundList;
    const passwordList = wx.getStorageSync('passwordList');
    if (checkPassword(touchRoundList, passwordList)) {
      console.log('密码正确');
    } else {
      console.log('密码错误');
    }
  },
})