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

魁首哥

作者

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

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

如图：

滑块验证组件

puzzleVerify目录

index.wxml

<viewclass="slide_model"wx:if="{{slidebel}}"><viewclass="slide_wrapper"><viewclass="canvas_img"id="canvas_img"><canvascanvas-id="firstCanvas"id="firstCanvas"></canvas><cover-viewclass="canvas_view"></cover-view><cover-imageclass="canfile_image"src="{{canfile_image}}"></cover-image></view><viewclass="canvas_slide"><viewclass="canvas_width"></view><viewclass="canvas_kus"bindtouchstart="slide_start"bindtouchmove="slide_hmove"bindtouchend="slide_chend"><viewwx:if="{{slide_status<2}}"></view><viewwx:if="{{slide_status==2}}"><imagesrc="/imgs/puzzle-checked.png"mode="aspectFit"></image></view><viewwx:if="{{slide_status==3}}"><imagesrc="/imgs/puzzle-fail.png"mode="aspectFit"></image></view></view><viewwx:if="{{slide_status==0||slide_status==1}}">拖动左边滑块完成上方拼图</view></view><viewclass="canvas_guil"><imagebindtap="visidlisd"class="footer-icon"src="/imgs/puzzle-close.png"></image><imagebindtap="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:25rpxauto0;}#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:005px2pxrgba(255,255,255,0.5);}/*移动的空格*/.canfile_image{width:50px;height:50px;position:absolute;left:0;z-index:3;box-shadow:0px0px15pxrgba(0,0,0,0.8);box-sizing:border-box;}.canfile_image::before{content:"";position:absolute;width:100%;height:100%;box-shadow:008px5pxrgba(255,255,255,0.8)inset;}.canvas_slide{width:90%;height:45px;background:#eee;text-align:center;line-height:80rpx;margin:0auto;position:relative;font-size:26rpx;}/*滑条上滑块经过的部分*/.canvas_width{position:absolute;left:0;top:0;height:45px;background-color:#1991FA;width:0;border-top:1pxsolid#ddd;border-bottom:1pxsolid#ddd;}/*滑块*/.canvas_kus{width:48px;height:45px;background-color:#fff;font-size:36rpx;font-weight:700;position:absolute;left:0;top:0;border:1pxsolid#ddd;color:#fff;box-shadow:0010pxrgba(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:1pxsolid#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){varthat=thisthis.setData({slidebel:!this.data.slidebel})if(this.data.slidebel){if(this.data.canvas_width!=0){this.slide_tap()return}wx.nextTick(()=>{letquery=this.createSelectorQuery()query.select('#canvas_img').boundingClientRect(function(rect){that.setData({canvas_width:rect.width})that.slide_tap()}).exec()})}},//画布slide_tap(e){varthat=thisvarimgIndex=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(){varcontext=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){varthat=thisvarcliextX;varmaxX=this.data.canvas_width-60if(that.data.slide_clientX<1){that.data.slide_status=0returnfalse}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

<buttonbindtap="getCode"></button><puzzleVerifyid="puzzleVerify"bind:puzzleVerify="countDown"sildeBlockCont="{{sildeBlockCont}}"></puzzleVerify>

js

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

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

阅读全文

发布于 2022-01-10 23:45:21

android