前提：之前写的vue版滑块验证码，可以在h5和web使用，但是在微信小程序运行就有问题。因此进行一系列的修改
一、vue版滑块验证码实现地址
vue 图片拖拽验证码_周皮皮皮皮皮皮的博客-CSDN博客
二、微信小程序遇到问题
1. 小程序是没有window和document对象，所以要把之前代码中的document改成wx.createSelectorQuery()去获取dom，记住每一个dom都要写一遍wx.createSelectorQuery
2. 创建图片用createImage()
三、代码展示
1. code.vue（验证码组件）
<template><div id="slideVerify" class="slide-verify" :style="widthlable" onselectstart="return false;"><canvas ref="canvas" type="2d" id="myCanvas" /><canvas ref="block" type="2d" id="myBlock" class="slide-verify-block" :style="{ left: sliderLeft }" /><van-icon class="slide-verify-refresh-icon el-icon-refresh" name="replay" @click="refresh" /><div class="slide-verify-info" :class="{ fail: fail, show: showInfo }" @click="refresh">{{ infoText }}</div><divclass="slide-verify-slider":style="widthlable":class="{'container-active': containerActive,'container-success': containerSuccess,'container-fail': containerFail}"><div class="slide-verify-slider-mask" :style="{ width: sliderMaskWidth }"><divclass="slide-verify-slider-mask-item":style="{ left: sliderLeft }"@mousedown="sliderDown"@touchstart="touchStartEvent"@touchmove="touchMoveEvent"@touchend="touchEndEvent"><div class="slide-verify-slider-mask-item-icon el-icon-s-unfold"></div></div></div><span class="slide-verify-slider-text">{{ sliderText }}</span></div></div></template><script>function sum(x, y) {return x + y}function square(x) {return x * x}export default {name: 'SlideVerify',props: {// block lengthl: {type: Number,default: 42},// block radiusr: {type: Number,default: 10},// canvas widthw: {// 背景图宽type: [Number, String],default: 350},// canvas heighth: {// 背景图高type: [Number, String],default: 200},// canvas widthsw: {// 小图宽type: [Number, String],default: 50},// canvas heightsh: {type: [Number, String],default: 50},// block_x: {// type: Number,// default: 155// },blocky: {// 小图初始的垂直距离type: [Number, String],default: 20},sliderText: {type: String,default: 'Slide filled right'},imgurl: {// 大图地址type: String,default: ''},miniimgurl: {// 小图地址type: String,default: ''},fresh: {type: Boolean,default: false}},data() {return {containerActive: false, // container active classcontainerSuccess: false, // container success classcontainerFail: false, // container fail classcanvasCtx: null,blockCtx: null,block: null,canvasStr: null,L: this.l + this.r * 2 + 3, // block real lenghtimg: undefined,originX: undefined,originY: undefined,isMouseDown: false,trail: [],widthlable: 'width: 300px;',sliderLeft: 0, // block right offsetsliderMaskWidth: 0, // mask widthdialogVisible: false,infoText: '验证成功',fail: false,showInfo: false}},watch: {fresh(val) {if (val) {this.init()}}},mounted() {// 随机生成数this.block_x =this.init()},methods: {init() {this.initDom()},initDom(h) {const that = this// 创建背景const query = wx.createSelectorQuery()query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {that.canvasStr = res[0].node;that.canvasCtx = that.canvasStr.getContext("2d");// 创建图片对象let bgImage = that.canvasStr.createImage();bgImage.src = that.imgurl;bgImage.onload = () => {// 画出背景that.canvasCtx.drawImage(bgImage, 0, 0)}})// 创建移动模块const query1 = wx.createSelectorQuery()query1.select('#myBlock').fields({ node: true, size: true, rect: true }).exec((res1) => {that.block = res1[0].node;// 获取canvas 2d绘图上下文that.blockCtx = that.block.getContext("2d");// 创建图片对象let bgImage1 = that.block.createImage();var blocky = h || that.blockybgImage1.src = that.miniimgurl;bgImage1.onload = () => {// 画出背景that.blockCtx.drawImage(bgImage1, 0, blocky)}})},// 刷新refresh() {this.$emit('refresh')},sliderDown(event) {this.originX = event.clientXthis.originY = event.clientYthis.isMouseDown = true},touchStartEvent(e) {this.originX = e.touches[0].pageXthis.originY = e.touches[0].pageYthis.isMouseDown = true},touchMoveEvent(e) {if (!this.isMouseDown) return falseconst moveX = e.touches[0].pageX - this.originXconst moveY = e.touches[0].pageY - this.originYif (moveX < 0 || moveX + 38 >= this.w) return falsethis.sliderLeft = moveX + 'px'const blockLeft = ((this.w - 40 - 20) / (this.w - 40)) * moveXthis.containerActive = truethis.sliderMaskWidth = moveX + 'px'this.trail.push(moveY)},touchEndEvent(e) {if (!this.isMouseDown) return falsethis.isMouseDown = falseif (e.mp.changedTouches[0].pageX === this.originX) return falsethis.containerActive = falsethis.verify()},verify() {const arr = this.trail // drag y move distanceconst average = arr.reduce(sum) / arr.length // averageconst deviations = arr.map(x => x - average) // deviation arrayconst stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length) // standard deviationconst left = parseInt(this.sliderLeft)this.$emit('success', left, stddev)},reset(h) {this.containerActive = falsethis.containerActive = falsethis.containerSuccess = falsethis.containerFail = falsethis.sliderLeft = 0this.sliderMaskWidth = 0this.canvasCtx.clearRect(0, 0, this.w, this.h)this.blockCtx.clearRect(0, 0, this.w, this.h)this.fail = falsethis.showInfo = falsethis.containerFail = falsethis.containerSuccess = falsethis.initDom(h)}}}</script><style scoped>.slide-verify {position: relative;width: 100%;overflow: hidden;}.slide-verify-block {position: absolute;left: 0;top: 0;}.slide-verify-refresh-icon {position: absolute;right: 10px;top: 0;width: 34px;height: 34px;cursor: pointer;content: '刷新';font-size: 22px;line-height: 34px;text-align: center;font-weight: bold;color: #3fdeae;/* background: url("../../assets/move/icon_light.png") 0 -437px; */background-size: 34px 471px;}.slide-verify-refresh-icon:hover {transform: rotate(180deg);transition: all 0.2s ease-in-out;}.slide-verify-slider {position: relative;text-align: center;width: 310px;height: 40px;line-height: 40px;margin-top: 15px;background: #f7f9fa;color: #45494c;border: 1px solid #e4e7eb;}.slide-verify-slider-mask {position: absolute;left: 0;top: 0;height: 40px;border: 0 solid #1991fa;background: #d1e9fe;}.slide-verify-info {position: absolute;top: 170px;left: 0;height: 30px;width: 350px;color: #fff;text-align: center;line-height: 30px;background-color: #52ccba;opacity: 0;}.slide-verify-info.fail {background-color: #f57a7a;}.slide-verify-info.show {animation: hide 1s ease;}@keyframes hide {0% {opacity: 0;}100% {opacity: 0.9;}}.slide-verify-slider-mask-item {position: absolute;top: 0;left: 0;width: 38px;height: 38px;background: #fff;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);cursor: pointer;transition: background 0.2s linear;}.slide-verify-slider-mask-item:hover {background: #1991fa;}.slide-verify-slider-mask-item:hover .slide-verify-slider-mask-item-icon {background-position: 0 -13px;}.slide-verify-slider-mask-item-icon {position: absolute;top: 9px;left: 7px;width: 14px;height: 12px;content: '法币';font-size: 22px;color: #ddd;/* text-align: center;line-height: 12px; *//* background: url("../../assets/move/icon_light.png") 0 -26px; *//* background-size: 34px 471px; */}.container-active .slide-verify-slider-mask-item {height: 38px;top: -1px;border: 1px solid #1991fa;}.container-active .slide-verify-slider-mask {height: 38px;border-width: 1px;}.container-success .slide-verify-slider-mask-item {height: 38px;top: -1px;border: 1px solid #52ccba;background-color: #52ccba !important;}.container-success .slide-verify-slider-mask {height: 38px;border: 1px solid #52ccba;background-color: #d2f4ef;}.container-success .slide-verify-slider-mask-item-icon {background-position: 0 0 !important;}.container-fail .slide-verify-slider-mask-item {height: 38px;top: -1px;border: 1px solid #f57a7a;background-color: #f57a7a !important;}.container-fail .slide-verify-slider-mask {height: 38px;border: 1px solid #f57a7a;background-color: #fce1e1;}.container-fail .slide-verify-slider-mask-item-icon {top: 14px;background-position: 0 -82px !important;}.container-active .slide-verify-slider-text,.container-success .slide-verify-slider-text,.container-fail .slide-verify-slider-text {display: none;}</style>
2. 引用组件
<template><div><van-button class="b-btn" type="info" size="small" @click="handleLogin">登 录</van-button><div v-show="isShowCode" class="box-code"><div class="title"><span>请完成安全验证</span><span class="close" @click="isShowCode = false">×</span></div><Captcharef="dialogopen":l="42":r="10":w="catcha.w":h="catcha.h":blocky="catcha.blocky":imgurl="catcha.imgurl":miniimgurl="catcha.miniimgurl":slider-text="catcha.text"@success="onSuccess"@fail="onFail"@refresh="onRefresh"/></div></div></template><script>import Captcha from './code'export default {components: {Captcha},data() {return {isShowCode: false,catcha: {blocky: 0,imgurl: '',miniimgurl: '',text: '向右滑动完成拼图',h: 200,w: 350,sh: 45,sw: 55,modifyImg: '',unionKey: ''} // 图片验证码传值}},methods: {handleLogin() {if (!this.userInfo.ksh || !this.userInfo.idcard) {Toast.fail('请填写账号密码')return}this.isShowCode = truethis.getImageVerifyCode()},// 获取图形验证码getImageVerifyCode() {getPicCode().then(res => {if (res && res.data) {var imgobj = res.datathis.catcha.blocky = imgobj.ythis.catcha.imgurl = 'data:image/png;base64,' + imgobj.shadeImagethis.catcha.miniimgurl = 'data:image/png;base64,' + imgobj.cutoutImagethis.catcha.unionKey = imgobj.unionKey}this.$nextTick(() => {if (this.$refs.dialogopen) {this.$refs.dialogopen.reset(imgobj.y)}})})},onSuccess(val) {this.login({x: val,y: this.catcha.blocky,unionKey: this.catcha.unionKey})},onFail() {console.log('失败')},// 刷新onRefresh() {this.catcha.imgurl = ''this.catcha.miniimgurl = ''this.getImageVerifyCode()}}}</script><style>page {background: #cce2fe;}</style><style scoped>.item-login {padding: 25px 0 0;position: relative;}.lable-item-login {padding: 0 15px 20px;}.pgo-top {margin-bottom: 5px;}.pgo-top-img {width: 100%;}.b-parent {margin: 20px 15px 40px;}.box-login {position: fixed;top: 188px;left: 0;right: 0;border: solid 12px #a5cefc;margin: 0 45px;background: #fff;}.login-top {height: 59px;width: 172px;position: absolute;left: 50%;top: 0;transform: translate(-50%, -20%);z-index: 10;}.pt50 {padding-top: 60px;}.pic-code{position: absolute;width: 80px;height: 30px;right: 20px; bottom: 5px;z-index: 10;}.box-code {position: fixed;left: 50%;top: 50%;width: 300px;transform: translate(-50%, -50%);background-color: #fff;border-radius: 3px;overflow: hidden;padding-bottom: 10px;}.box-code .title {font-size: 14px;padding: 5px;font-weight: bold;display: flex;justify-content: space-between;align-items: center;}.box-code .title .close {font-size: 20px;}.box-code > .content {margin: 0 auto;}</style>
四、总结
主要是小程序的部分写法和web的写法起冲突了，了解后就可以了。
