Android如何实现微信小程序滑块验证

这篇文章主要讲解了“Android如何实现微信小程序滑块验证”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Android如何实现微信小程序滑块验证”吧！

如图：

滑块验证组件

puzzleVerify目录

index.wxml

<!-- 滑动验证弹窗 --><view class="slide_model" wx:if="{{slidebel}}"><view class="slide_wrapper"><!-- 拼图图片部分 --><view class="canvas_img" id="canvas_img"><!-- 背景图片 --><canvas  canvas-id="firstCanvas" id="firstCanvas"></canvas><!-- 被抠方块 --><cover-view class="canvas_view" ></cover-view><!-- 可移动空格 --><cover-image class="canfile_image"src="{{canfile_image}}"></cover-image></view><!-- 滑块 --><view class="canvas_slide"><view class="canvas_width"></view><view class="canvas_kus" bindtouchstart="slide_start" bindtouchmove="slide_hmove" bindtouchend="slide_chend"><view wx:if="{{slide_status < 2}}"></view><view wx:if="{{slide_status == 2}}"><image src="/imgs/puzzle-checked.png" mode="aspectFit"></image></view><view wx:if="{{slide_status == 3}}"><image src="/imgs/puzzle-fail.png" mode="aspectFit"></image></view></view><view wx:if="{{slide_status == 0 || slide_status == 1}}">拖动左边滑块完成上方拼图</view></view><!-- 底部按钮 --><view class="canvas_guil"><image bindtap="visidlisd" class="footer-icon" src="/imgs/puzzle-close.png"></image><image bindtap="slide_tap" class="footer-icon" src="/imgs/puzzle-fresh.png"></image></view></view></view>

index.wxss

.slide_model {  width: 100%;  height: 100vh;  z-index: 999;  position: fixed;  left: 0;  top: 0;  background: rgba(0, 0, 0, 0.4);  display: flex;  align-items: center;  justify-content: center;}.slide_wrapper {  float: left;  z-index: 1;  position: relative;  width: 90%;  background-color: #fff;}.canvas_img {  width: 90%;  min-height: 150px;  position: relative;  margin: 25rpx auto 0;}#firstCanvas {  z-index: 1 !important;  width: 100%;  height: 100%;}.canvas_view {  width: 50px;  height: 50px;  position: absolute;  background: rgba(0, 0, 0, 0.6);  z-index: 2;  box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.5);}.canfile_image {  width: 50px;  height: 50px;  position: absolute;  left: 0;  z-index: 3;  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);  box-sizing: border-box;}.canfile_image::before {  content: "";  position: absolute;  width: 100%;  height: 100%;  box-shadow: 0 0 8px 5px rgba(255, 255, 255, 0.8) inset;}.canvas_slide {  width: 90%;  height: 45px;  background: #eee;  text-align: center;  line-height: 80rpx;  margin: 0 auto;  position: relative;  font-size: 26rpx;}.canvas_width {  position: absolute;  left: 0;  top: 0;  height: 45px;  background-color: #1991FA;  width: 0;  border-top: 1px solid #DDD;  border-bottom: 1px solid #ddd;}.canvas_kus {  width: 48px;  height: 45px;  background-color: #fff;  font-size: 36rpx;  font-weight: 700;  position: absolute;  left: 0;  top: 0;  border: 1px solid #ddd;  color: #fff;  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}.canvas_kus>view {  width: 100%;  height: 100%;  background-position: center;  background-size: 50% 40%;  background-repeat: no-repeat;}.canvas_guil {  width: 100%;  border-top: 1px solid #f4f4f4;  height: 100rpx;  display: flex;  align-items: center;  float: left;  font-size: 30rpx;  color: #666;}.canvas_guil>image {  margin-left: 30rpx;}

index.js

Component({properties: {sildeBlockCont: {   //接受父组件值type: String}},data: {canvas_width: 0,slidebel: false, //滑动弹窗canfile_image: '', //裁剪图片canfile_x: '', //被抠方块的水平位置canfile_y: '', //被抠方块的垂直位置slide_clientX: 0, //移动位置slide_status: 0, //0 停止操作   1 触发长按   2 正确   3 错误},methods: {// 弹窗visidlisd(e) {var that = thisthis.setData({slidebel: !this.data.slidebel})if (this.data.slidebel) {if (this.data.canvas_width != 0) {this.slide_tap()return}wx.nextTick(() => {let query = this.createSelectorQuery()query.select('#canvas_img').boundinGClientRect(function (rect) {that.setData({canvas_width: rect.width})that.slide_tap()}).exec()})}},// 画布slide_tap(e) {var that = thisvar imgIndex = Math.round(Math.random() * 13 + 1)that.setData({canfile_x: Math.round(Math.random() * (this.data.canvas_width - 120) + 60),canfile_y: Math.round(Math.random() * (this.data.canvas_width * 13 / 28 - 60)),canfile_image: ''})setTimeout(function () {var context = wx.createCanvasContext('firstCanvas', that)context.width = that.data.canvas_widthcontext.height = that.data.canvas_width * 13 / 28//  /imgs/puzzle-bg-${imgIndex}.jpg  为滑块背景图 从静态资源获取  如从接口获取可从that.properties.properties拿context.drawImage(`/imgs/puzzle-bg-${imgIndex}.jpg`, 0, 0, context.width, context.height)context.draw(false, (() => {wx.canvasToTempFilePath({x: that.data.canfile_x,y: that.data.canfile_y,width: 50,height: 50,canvasId: 'firstCanvas',success: function (res) {that.setData({canfile_image: res.tempFilePath})}}, that);}))}, 50)},// 滑动开始slide_start(e) {this.setData({slide_status: 1})},// 滑动中slide_hmove(e) {this.setData({slide_clientX: (e.touches[0].clientX - 60) < 1 ? 0 : (e.touches[0].clientX - 60)})},//滑动结束slide_chend(e) {var that = thisvar cliextX;var maxX = this.data.canvas_width - 60if (that.data.slide_clientX < 1) {that.data.slide_status = 0return false}if (that.data.slide_clientX > maxX) {cliextX = maxX} else {cliextX = that.data.slide_clientX}if (((that.data.canfile_x + 5) > cliextX) && ((that.data.canfile_x - 5) < cliextX)) {that.setData({slide_status: 2,slide_clientX: that.data.canfile_x,})setTimeout(function () {that.setData({slidebel: false,})}, 500)wx.showToast({icon: 'success',title: '验证成功',})that.triggerEvent('puzzleVerify')} else {that.setData({slide_status: 3,})}setTimeout(function () {that.setData({slide_status: 0,slide_clientX: 0,})}, 500)},},lifetimes: {created() {// 在组件实例刚刚被创建时执行},ready() {// 在组件在视图层布局完成后执行// console.log(this.properties.sildeBlockCont);},}})

index.JSON

{  "component": true,  "usingComponents": {}}

父组件调用滑块

json

"usingComponents": {    "puzzleVerify": "/components/puzzleVerify/index"  }

wxml

<button  bindtap="getCode"></button><puzzleVerify id="puzzleVerify" bind:puzzleVerify="countDown" sildeBlockCont="{{sildeBlockCont}}"></puzzleVerify>

js

data: {sildeBlockCont: '', //滑块背景图},onReady: function () {this.puzzleVerify = this.selectComponent("#puzzleVerify")},getCode() {this.puzzleVerify.visidlisd()},// 滑块验证成功操作countDown() {}

感谢各位的阅读，以上就是“Android如何实现微信小程序滑块验证”的内容了，经过本文的学习后，相信大家对Android如何实现微信小程序滑块验证这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！