用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

微信小程序实战开发教程:手势解锁;基于canvas

天下雪 2017-1-6 15:32

制作者:crazytea,来自授权地址手势解锁是app上常见的解锁方式,相比输入密码方式操作起来要方便许多。下面展示如何基于微信小程序实现手机解锁。最终实现效果如下图:整个功能基于canvas实现,首先添加画布组件,并 ...

制作者:crazytea,来自授权地址

手势解锁是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;
}
鲜花
鲜花 (1)
鸡蛋
鸡蛋 (2)

刚表态过的朋友 (3 人)

分享至 : QQ空间
收藏
原作者: crazytea 来自: 授权地址

相关阅读

  • Arui 2017-1-22 09:26
    https://github.com/rrrrui/wx-gestureLock
    自己实现的手势解锁
  • Nelson_冯 2017-1-19 14:55
    学习了,感谢分享