摘要:本文给出了一个小程序手势图案锁屏、解锁实现方案,该方案具有重绘少、屏幕闪烁少,使用简单等优点,并增加了onTouchEnd和onSuccess回调,方便大家进行代码扩展,比如可以在onSuccess回调中获取图案密码,存储到数据库等物理介质。
问题由来:小程序目前登陆逻辑是,首次登陆输入用户密码、口令,认证通过后会绑定微信openid,下次进入时只要是同一个微信号(通常openid一致)就直接进入小程序主页面,无需二次输入密码。这种方式简单、高效,但不是很安全,如你手机借他人用下,他人就可以直接进入小程序操作业务啦,为此,打算进入小程序主页面前增加图案解锁(之前没设置的话,先设置图案密码)。
解决思路:度娘看看,有没拿来可用的?还真有,比如:https://www.jb51.net/article/134021.htm(参考方案),下载了DEMO看下,在模拟器上效果还可以,但是在android真机上,有点泪奔,手没怎么划动呢,屏幕就闪个不停。经考量,参考他的思路,重新实现吧。小程序代码片段,DEMO下载!因编辑器URL不支持wechatide协议,请大家复制 wechatide://minicode/U94hICmE7I9m 到浏览器地址栏即可。
一、图案设置、解锁程序演示图如下,具体请大家下载代码片段体验
二、index页面代码
index.wxml
{{lockType==1?'图案设置' : '图案解锁'}}
重新设置
忘记密码
{{lockMsg}}
使用说明:
1) 读取图案密码,密码为空,则进入图案设置模式,反之则进入解锁模式;
2) 设置模式,点击'重新设置',取消第一次图案绘制,重新绘制;
3) 解锁模式,点击'忘记密码',重置图案密码,重新设置;
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 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回调。