微信小程序之手势解锁

  • • 发表于 7个月前
  • • 作者 似海深
  • • 721 次浏览
  • • 7 条评论
  • • 最后编辑时间 7个月前
  • • 来自 [技术]

申明:本篇文章我只改动了,并非原创

  1. 首先进行页面布局,wxml文件代码:

    <view class="lock-box">
    <view class="lock-title {{titleColor}}">
    {{title}}
    </view>
    <view hidden="{{resetHidden}}" bindtap="lockreset" class="lock-reset">重置1. -
    </view>
    <canvas disable-scroll="true" class="lock-cav" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" canvas-id="locker" style="width:686rpx;height:686rpx;">
    </canvas>
    </view>

    这里需要对解锁提示语{{title}},解锁提示语颜色{{titleColor}},重置按钮的显示隐藏{{resetHidden}}进行动态数据绑定;然后对canvas进行三个touch事件绑定;重要:一定要设置disable-scroll=”true” 属性,此属性是当手指在canvas上触摸时,当前页面(page)不会被拖拽,不然就没法正常绘图了,而且这里必须要用bindXXX,用。catchXXX还是会被拖拽,而且三种事件都要加上

    1. 主页js代码
      // 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
    });
    },
    //touchstart事件绑定
    touchS:function(e){
    wxlocker.lock.bindtouchstart(e);
    },
    //touchmove事件绑定
    touchM:function(e){
    wxlocker.lock.bindtouchmove(e);
    },
    //touchend事件绑定
    touchE:function(e){
    wxlocker.lock.bindtouchend(e,this.lockSucc);
    this.initState();
    },
    //解锁成功的回调函数
    lockSucc:function(){
    console.log(“解锁成功!”);
    //do something
    },
    lockreset:function(){
    wxlocker.lock.updatePassword();
    this.initState();
    }
    })

  2. wxlocker.js主要代码部分:
    var wxlocker = function(obj){
    // 33的圆点格子
    this.chooseType = 3;
    };
    创建wxlocker对象,并设置属性chooseType,代表绘制n
    n的圆圈;
    wxlocker.prototype.drawPoint = function() {
    // 初始化圆心
    for (var i = 0 ; i < this.lastPoint.length ; i++) {
    this.ctx.setFillStyle(‘#10AEFF’);
    this.ctx.beginPath();
    this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y,
    this.r / 2, 0, Math.PI * 2, true);
    this.ctx.closePath();
    this.ctx.fill();
    }
    }
    wxlocker.prototype.drawStatusPoint = function(type) {
    // 设置手指经过的圆圈颜色,type为色值
    for (var i = 0 ; i < this.lastPoint.length ; i++) {
    this.ctx.setStrokeStyle(type);
    this.ctx.beginPath();
    this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, 
    this.r, 0, Math.PI * 2, true);
    this.ctx.closePath();
    this.ctx.stroke();
    
    }
    wx.drawCanvas({
     canvasId: "locker",
     actions: this.ctx.getActions(),
     reserve:true
    
    });
    }
    wxlocker.prototype.drawLine = function(po, lastPoint) {
    // 绘制线条轨迹
    this.ctx.beginPath();
    this.ctx.setLineWidth(1);
    this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y);
    for (var i = 1 ; i < this.lastPoint.length ; i++) {
       this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);
    
    }
    this.ctx.lineTo(po.x, po.y);
    this.ctx.stroke();
    this.ctx.closePath();

}
详细最新代码:
https://github.com/demi520/wxapp-lock

转载文章 阅读原文

分享到:
评论区(共7条评论)
7条评论
Ctrl+Enter
作者

似海深

似海深

APP:1 帖子:1 回复:0 积分:45

已加入社区[234]天

主人太懒,签名没设置!

作者详情》
精品推荐课程更多
扫码入群
Top