微信小程序纯前端拼图验证

1、先看效果图

123.gif

2、创建组件(puzzle-verify-simple)

// index.html
<view class="back" wx:if="{{show}}"></view>
<view class="container" wx:if="{{show}}">
  <view class="slidebox">
    <view class="slidetitle">
      <text class="header-title">安全验证</text>
      <text class="header-tip">拖动下方滑块完成拼图</text>
    </view>
    <view class="inner">
      <view class="box" style="width:{{box.width}}px;height:{{box.height}}px;background-image: url({{box.back}});">
        <view class="block" style="left:{{position.left}}px;top:{{position.top}}px;"></view>
        <view class="block real" style="left:{{position.left2}}px;top:{{position.top}}px;background-image: url({{box.back}});background-size: {{box.width}}px {{box.height}}px;background-position:-{{position.left}}px -{{position.top}}px;"></view>
      </view>
      <!-- <view class="sliderCont">
        <view style="left:{{position.left2}}px;" class="blueCont" bindtouchstart="startClick" bindtouchmove="moveClick" bindtouchend="endClick">
          | | |
        </view>
      </view>
      <view class="error1" wx:if="{{status==0}}">请控制拼图块对齐缺口</view>
      <view class="success1" wx:if="{{status==1}}">验证成功</view> -->
      <view class="tool" bindtouchstart="startClick" bindtouchmove="moveClick" bindtouchend="endClick">
        <view class="result" wx:if="{{status>=0}}">
          <view class="error" wx:if="{{status==0}}">
            <icon type="warn"></icon>
            请控制拼图块对齐缺口
          </view>
          <view class="success" wx:if="{{status==1}}">
            <icon type="success"></icon>
            验证成功
          </view>
        </view>
        <block wx:else>
          <view class="slideback {{isMove?'active':''}}" style="width:{{position.left2}}px;"></view>
          <view class="slidebtn" style="left:{{position.left2}}px;">
            <view class="icon"></view>
          </view>
          向右滑动填充图片
        </block>
      </view>
    </view>
    <view class="bot">
      <view class="closebtn" bindtap="refereshClick">
        <van-icon size="24" name="replay" />
      </view>
      <view class="closebtn1" bindtap="closeClick" wx:if="{{enableClose}}">
        <van-icon size="24" name="close" />
      </view>
    </view>
  </view>
</view>

// index.wxss
/* 样式定义 */
.back {
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}
 
.slidebox {
    position: fixed;
    z-index: 11;
    width: calc(100% - 20px);
    background: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
    animation: runOne 0.5s ease-in forwards;
}
 
/*头部*/
.slidetitle {
    padding: 10px;
    /* height: 40px;
    line-height: 40px;
    text-indent: 10px;
    background: #07c160;
    color: white;
    font-size: 14px;
    letter-spacing: 1px; */
}
.header-title {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .header-tip {
    font-size: 24rpx;
    color: #666;
  }
.bot{
    padding: 10px;
    display: flex;
    justify-content:flex-end;
    align-items: center;
}
.closebtn1 {
    margin-left: 20rpx;
}
 
.slidetitle .close {
    width: 20px;
    height: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAEAYAAAD6+a2dAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAA1JJREFUeNrtnElOw0AQRTErboLYsUGIcccgkIAEEgizGMOM4BYgToKIxE3YcQ4GMdPFouKFlSbu7tgu2/lvU0IEd9X/38ZJbHd0AAAAAAAAAAAAAAAAAABuEBERdXZyvbzkWquRIkVqYUG6v7TBuvT3c725Yb3m5qT7ch+IiIi2tkiLUjzo6al0n9KwHsUi168vvV6zs9J92g+mSJG6uqKm+EE4PpbuN3F9jIwnYn2ur6X7dRywu5vr01NoEIiI6PBQuu9kdDEw3v+9IkWqr0+67xYHHhiwC8LRkXTf8ehgYTwRERUK0n1HLMDgINfn53Y5IrS98XpBbINwcCDdt9ucMD5EoKGhvAUBxtsKpkiRGh5mIV5ezIJQrUr33TAHjG8N6yAoUqT298X7hvHRwsaOjJgF4feX68ZG4n3C+HjhIIyOcn19DQ2CIkVqfT32vmB8srCxY2Ms5Ntbc8F/fvj1a2uR9wHjZQkG4f3dLAirqy2vC+PTBRs7Pm4cBCIiWlmxXgfGpxsOwsSEXRCWl0O3C+OzBRswOWkXhEpFvx0Yn1mCQfj4MAvC0hKMzxls0MwM189PM0NNjS8WpecDhrBhU1NmRwTs8bmFDZyetgtC+xjfKd1AMnR11cc1nNd/nf93IHP4Vx+b/Y//D/O3jyAlsGHlMtfv72hOAv3tlMvS84F/4D2+VLIzvlCwO0eI7iNmEBFue3zjyZ1bEKL/0gkYwkYsLrZqvH67tkGI/2toUIeF9z/Bi854/ToWQSAiiQtT2oakjNevaxoEuSuUcgsLWqkE97T4jdf3YRuEzU1p/TILC+jfXOoLmrzx+r5Mg5Cdy9lTQ1qN1/dpG4Ts3+kUGyzQ9nbajdf3jSA4w2+jdnayZnzDHE5ByN9NsOaCKVKkdnezbnzDXLZBaLfnI/Dge3vBPSH7xuvntD0inJxI9x2fIPVbufJufMPcTkeEHD06hwerVtvNeL0OtkeEszPpvt0HDnw7Z2p8/q+58+cMzh0WhPl56b4dB63VYHwzfUwfEnV3J92v44AXFzDeRKewIJyfx7W+F+9gXn37pRLXnh6u9/ee53me9/AQ1/pZg/Xq7eWf/OcCPj5yvb1lvYik+wQAAAAAAAAAAAAAAACQOf4Al4KQEGeQdWsAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMTAtMTZUMTU6NTM6NDYrMDg6MDCr8mCYAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTEwLTE2VDE1OjUzOjQ2KzA4OjAw2q/YJAAAAEd0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fbDU2MWF5eWUwbi9jbG9zZS5zdmdIplUhAAAAAElFTkSuQmCC);
    background-size: contain;
}
 
.slidetitle .closebtn:active {
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.2);
}
 
.referesh {
    width: 20px;
    height: 20px;
    background: url(data:image/png;base64,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);
    background-size: contain;
}
 
/*图片展示*/
.inner {
    padding: 10px;
}
 
.box {
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100px;
    background: url(http://beijing.gongjuji.net/imgdata/big/d25ccb7f-e455-4f61-b596-bfefcefd77f9.jpg);
    background-size: contain;
    position: relative;
}
 
.box .block {
    width: 50px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: absolute;
    /* left: 100px;
    top: 50%;
    transform: translate(0, -50%); */
    background: rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
}
 
.box .real {
    left: 0;
    background: url(随机图片中的一张,https);
    /* background-size: 336px 100px;
    background-position: -236px -50px; */
}
.sliderCont{
    position: relative;
    margin-top: 15px;
    width: 100%;
    height: 20rpx;
    border-radius: 30rpx;
    background: linear-gradient(90deg, #e8e8e8, #f5f5f5);
    transition: all 0.3s ease;
}
.blueCont{
  position: absolute;
  left: 0;
  top: -70%;
  width: 120rpx;
  height: 60rpx;
  background: blue;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(33, 150, 243, 0.3);
  border: 2rpx solid rgba(255, 255, 255, 0.5);
  /* 移除过渡动画，使用硬件加速优化性能 */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  color: #fff;
}
.error1 {
    margin-top: 40rpx;
    font-size: 24rpx;
    color: red;
}
 
.success1 {
    margin-top: 40rpx;
    font-size: 24rpx;
    color: green;
}
/*底部滑块*/
.tool {
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 40px;
    margin-top: 15px;
    position: relative;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
}
 
.slideback {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    height: 100%;
    width: 100px;
    box-sizing: border-box;
}
 
.slidebtn {
    position: absolute;
    z-index: 2;
    width: 50px;
    height: 40px;
    background: white;
    box-sizing: border-box;
    border: 1px solid #ddd;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
}
 
.slidebtn .icon {
    width: 30px;
    height: 30px;
    background: url(data:image/png;base64,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);
    background-size: contain;
    margin-top: 4px;
    margin-left: 5px;
}
 
.slidebtn:active {
    background: rgba(255, 255, 255, 0.1);
}
 
.slideback.active {
    border: 1px solid #07c160;
    background: rgba(0, 255, 0, 0.1);
}
 
.result {
    height: 100%;
}
 
.error {
    background: rgba(255, 0, 0, 0.1);
    height: 100%;
}
 
.success {
    background: rgba(0, 255, 0, 0.1);
    height: 100%;
}
 
.result icon {
    position: relative;
    top: 5px;
}
 
/**动画**/
@keyframes runOne{
    from{
        opacity: 0;
    }
    to{
opacity: 1;
    }
}

// index.js
var oldX = 0;
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        //是否允许关闭
        enableClose: {
            type: Boolean,
            value: true
        },
        show: {
          type: Boolean,
          value: false
        }
    },
    /**
     * 组件的初始数据
     */
    data: {
        backImg: [
          'xxx',
          'xxx',
          'xxx',
          'xxx',
          'xxx',
          'xxx',
          'xxx',
          'xxx',
          'xxx',
          'xxx'
        ], //十张图片，后续刷新随机展示
        backIndex: 0,
        isMove: false, //是否移动中
        status: -1, //状态 -1 初始值，1，成功，0 失败
        box: {
            width: 100,
            height: 100,
            back:''
        }, //背景框大小
        position: {
            left: 200,
            top: 29,
            left2: 0,
        } //滑块位置
    },
    /**
     * 组件的方法列表
     */
    methods: {
        //事件绑定
        //滑块事件
        startClick(e) {
            this.setData({
                isMove: true
            });
            if (e.touches.length > 0) {
                oldX = e.touches[0].pageX;
            }
        },
        moveClick(e) {
            var _this = this;
            var newX = 0;
            if (e.touches.length > 0) {
                newX = e.touches[0].pageX;
            }
            var span = newX - oldX;
            span = Math.max(span, 0);
            span = Math.min(span, _this.data.box.width - 50);
            _this.setData({
                'position.left2': span
            });
        },
        endClick() {
            var _this = this;
            //处理结果判断
            var position = _this.data.position;
            var span = Math.abs(position.left2 - position.left);
            // console.info(span);
            if (span > 3) {
                _this.setData({
                    isMove: false,
                    status: 0
                });
                setTimeout(() => {
                    _this.refereshClick();
                }, 1000);
                //触发失败
                _this.triggerEvent('onerror', {}, {
                    bubbles: false,
                    composed: false
                });
            } else {
                _this.setData({
                    isMove: false,
                    status: 1
                });
                //1秒后关闭
                setTimeout(() => {
                  this.triggerEvent('onClose');
                }, 1000);
                //触发成功
                _this.triggerEvent('onsuccess', {}, {
                    bubbles: false,
                    composed: false
                });
            }
        },
        //刷新
        refereshClick() {
            var _this = this;
            var box = this.data.box;
            //随机宽度，高度
            var left = Math.round(Math.random() * (box.width - 100)) + 50;
            var top = Math.round(Math.random() * (box.height - 60)) + 20;
            const random = Math.round(Math.random() * 10);
            _this.setData({
                'position.left': left,
                'position.top': top,
                'position.left2': 0,
                status: -1,
                isMove: false,
                'box.back':_this.data.backImg[random]
            });
        },
        //关闭
        closeClick() {
            this.setData({
                isShow: false
            });
            this.triggerEvent('onClose');
        }
    },
    lifetimes: {
        ready() {
            var _this = this;
            //获取系统信息计算图片宽度高度
            wx.getSystemInfo({
                success: (result) => {
                    var width = result.screenWidth - 20 - 20;
                    var height = width / 16 * 9;
                    _this.setData({
                        box: {
                            width: width,
                            height: height
                        }
                    });
                    //随机初始化位置
                    _this.refereshClick();
                },
            })
        }
    },
    observers: {
      'show': function(show) {
        if (show) {
          var _this = this;
            //获取系统信息计算图片宽度高度
            wx.getSystemInfo({
                success: (result) => {
                    var width = result.screenWidth - 20 - 20;
                    var height = width / 16 * 9;
                    _this.setData({
                        box: {
                            width: width,
                            height: height
                        }
                    });
                    //随机初始化位置
                    _this.refereshClick();
                },
            })
        }
      }
    }
})

// index.json
{
  "component": true,
  "usingComponents": {}
}

3、页面中引入

{
    "usingComponents": {
        "puzzle-verify-simple": "/components/puzzle-verify-simple/index"
      }
}

4、页面中使用

<view class="contaier">
    <button bind:tap="onSearch">打开</button>
</view>
<!-- 滑动验证组件 -->
<puzzle-verify-simple enable-close="{{true}}" bind:onClose="onVerifyClose" show="{{showVerify}}" bind:onsuccess="onVerifySuccess" bind:onerror="onVerifyError"></puzzle-verify-simple>

5、子向父事件处理

// pages/sliderCode/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        showVerify: false, 
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },
    onSearch() {
        // 显示滑动验证
        this.setData({
          showVerify: true,
        });
      },
    // 验证成功
  onVerifySuccess() {
    const { currentBatch } = this.data;
    
    wx.showLoading({
      title: '查询中...'
    });
    
    // 这里调用查询API
    setTimeout(() => {
      wx.hideLoading();
      wx.showToast({
        title: '查询成功',
      });
      this.setData({
        showVerify: false,
      });
    }, 2000);
  },
    onVerifyError() { },
    // 关闭验证
    onVerifyClose() {
        this.setData({
            showVerify: false,
        });
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})