微信小程序开发之手势解锁代码实例

微信小程序开发之手势解锁代码实例
手势解锁是app上常见的解锁方式，相比输入密码方式操作起来要方便许多。下面展示如何基于微信小程序实现手机解锁。最终实现效果如下图: 整个功能基于canvas实现，首先添加画布组件，并设定样式 手势解锁实现代码在gesturelock.js中(完整源码地址见末尾)。 初始化 主要设置一些参数，如canvas的长宽，canvas的context，手势锁的个数(3乘3, 4乘4)，手势锁的颜色，...

手势解锁是app上常见的解锁方式，相比输入密码方式操作起来要方便许多。下面展示如何基于微信小程序实现手机解锁。最终实现效果如下图:

手势解锁

整个功能基于canvas实现，首先添加画布组件，并设定样式

<!--index.wxml--><view class="container"> <canvas canvas-id="id-gesture-lock" class="gesture-lock" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd"></canvas></view>.gesture-lock { margin: 100rpx auto; width: 300px; height: 300px; background-color: #ffffff;}