欢迎光临,了解微信小程序开发,就上易用通!

当前位置 : 易用通 > 小程序模板
微信手势解锁(适用1221)微信手势解锁(适用1221)
立即下载

微信手势解锁(适用1221)

模板分类 : 小程序模板 模板编号 : Y949 源码文件 : 完全开源 下载权限 : VIP会员
模板大小 :  模板指数 :  更新时间 : 2018-03-16 09:31 模板等级 : ☆☆☆☆☆

模板截图:

今天又仿了个轮子,前几次用基于微信小程序自家的canvas写了两个小demo,期间真是各种莫名问题,尤其android系统问题比较严重;接下来的demo毋庸置疑,理所当然的还是有bug啦微信手势解锁(适用1221)(图1),经测试ios系统和开发工具都是没有问题的,用同事的手机一测,结果悲催了,触摸事件好像有问题.同事是一铁杆米粉,感兴趣的同学可以找找其他类型安卓手机上的问题,顺便帮忙解决一哈啦微信手势解锁(适用1221)(图2);前两次的demo感觉不太实用,这次的应该会好点微信手势解锁(适用1221)(图3) 微信手势解锁(适用1221)(图4)  微信手势解锁(适用1221)(图5)  wxml文件代码:
[HTML] 纯文本查看 复制代码
?
1
2
3
4
5
<view class="lock-box">
    <view  class="lock-title {{titleColor}}">{{title}}</view>
    <view hidden="{{resetHidden}}" bindtap="lockreset" class="lock-reset">重置</view>
    <canvas disable-scroll="true" class="lock-cav" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" canvas-id="locker" style="width:686rpx;height:686rpx;"></canvas>
</view>
js代码:
[JavaScript] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// pages/main/index.js
var wxlocker = require("../../utils/wxlocker.js");
Page({
  data:{
     title:'请设置手势密码',
     resetHidden:false,
     titleColor:""
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
 
    wxlocker.lock.init();
    this.initState();
  },
  onReady:function(){
    
  },
  onShow:function(){
    
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
 
  onUnload:function(){
    // 页面关闭
 
  },
  //设置提示语与重置按钮
  initState:function(){
    var resetHidden = wxlocker.lock.resetHidden;
    var title = wxlocker.lock.title;
    var titleColor = wxlocker.lock.titleColor;
    this.setData({
      resetHidden:resetHidden,
      title:title,
      titleColor:titleColor
    });
  },
  touchS:function(e){//touchstart事件绑定
    wxlocker.lock.bindtouchstart(e);
  },
  touchM:function(e){//touchmove事件绑定
    wxlocker.lock.bindtouchmove(e);
  },
  touchE:function(e){//touchend事件绑定
    wxlocker.lock.bindtouchend(e,this.lockSucc);
    this.initState();
  },
  lockSucc:function(){//解锁成功的回调函数
    console.log("解锁成功!");
    //do something
  },
  lockreset:function(){
    wxlocker.lock.updatePassword();
    this.initState();
  }
})

加入收藏
立即下载
分享到微信朋友圈
X

免责声明:

1. 本站所有素材(未指定商用),仅限学习交流,请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集,模板和图片版权归原作者及原出处所有。
3. 未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材。