微信小程序中封装天爱验证码

前些时候，开发一码游小程序，产品提出一个需求，需要在小程序中使用图片滑块校验，需要真实的，配合后端请求的，不要前端写的假验证码。恰巧一码游后台登陆就采用的是天爱的图形验证码。后端接口可以直接使用，可前端验证码组件需要如何实现呢？

由于开发时间有限，我没有从头一点点码代码，而是从uniapp的插件市场（点击打开）搜索到一款他人封装好的插件（x-verify-code），此插件就是基于tianai-captcha 封装，经过部分改动，结合我们项目的特点，成功将天爱验证码小程序uniapp版本插件搞定。

有需要的可以直接拿来用。

验证码组件

ymy-mp/src/components/tianai-verify-code/index.vue

<template>
	<view class="verify-wrap" v-if="verifyShow">
		<view class="verify-code">
			<!-- <view class="verify-title">安全验证</view> -->
			<view class="verify-tip">拖动下方滑块完成拼图</view>
			<view class="verify-content">
				<view class="verify-body">
					<view class="verify-bg">
						<image id="bg" :src="captchaData.background_image" mode="heightFix">
						</image>
					</view>
					<view class="verify-slider">
						<image id="slider-img" :style="{ left: leftDistance + 'px' }" :src="captchaData.slider_image"
							mode="heightFix"></image>
					</view>
					<view v-if="isSuccess" class="check-status check-success">
						<text>验证成功</text>
					</view>
					<view v-if="isErr" class="check-status check-error">
						<text>{{ errorText }}</text>
					</view>
				</view>
				<view @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" v-if="isActive"
					class="move-area">
					<movable-area class="move-block" :animation="true">
						<view class="color-change" :style="{ width: colorWidth + 'px' }"></view>
						<view class="move-shadow"></view>
						<movable-view class="block-button" :x='x' :animation="true" direction="horizontal"
							@change="StartMove">
							<u-icon name="arrow-rightward" color="#fff" size="20" class="icon-drag"></u-icon>
						</movable-view>
					</movable-area>
				</view>
			</view>
			<view class="verify-opts">
				<u-icon name="reload" color="#686868" size="30" @click="refresh"></u-icon>
				<view class="divide"></view>
				<u-icon name="close-circle" color="#686868" size="26" @click="verifyShow = false"></u-icon>
			</view>
		</view>
	</view>

</template>
<script>
export default {
	name: "tianai-verify-code",
	data() {
		return {
			verifyShow: false,
			isActive: true, //刷新滑块
			colorWidth: uni.upx2px(80),
			leftDefault: 0,
			leftDistance: 0, //默认卡片位置固定为靠左
			isSuccess: false, //验证成功
			isErr: false, //验证失败
			errorText: "验证失败，请重新尝试！",
			x: 0, //滑块的X距离
			xpos: 0, //读取X滑动的距离
			bgImg: { //当前环境滑块背景尺寸
				width: 0,
				height: 0
			},
			sliderImg: { //当前环境滑块尺寸
				width: 0,
				height: 0
			},
			captchaData: {
				id: null, //当前生成的滑块ID, 后端生成
				background_image: '', //滑块背景图
				slider_image: '', //滑块图片
				startTime: new Date(), //起始时间
				trackArr: [], //滑动轨迹
				movePercent: 0, //滑动距离与背景图百分比
				background_image_width: 0, //当前环境滑块背景宽
				background_image_height: 0, //当前环境滑块背景高
				slider_image_width: 0, //当前环境滑块宽
				slider_image_height: 0, //当前环境滑块高
				end: 206 //滑块滑动界限值
			}
		};
	},
	methods: {
		open() {
			uni.$u.debounce(this.getVerifyData, 80)
			this.verifyShow = true
		},
		close() {
			this.verifyShow = false
			this.$nextTick(() => {
				this.captchaData = {
					id: null, //当前生成的滑块ID, 后端生成
					background_image: '', //滑块背景图
					slider_image: '', //滑块图片
					startTime: new Date(), //起始时间
					trackArr: [], //滑动轨迹
					movePercent: 0, //滑动距离与背景图百分比
					background_image_width: 0, //当前环境滑块背景宽
					background_image_height: 0, //当前环境滑块背景高
					slider_image_width: 0, //当前环境滑块宽
					slider_image_height: 0, //当前环境滑块高
					end: 206 //滑块滑动界限值
				}
				this.isActive = false
				this.$nextTick(() => {
					this.isActive = true
				})
				this.colorWidth = 0
				this.x = this.xpos
				this.$nextTick(function () {
					this.x = 0
					this.colorWidth = uni.upx2px(80)
				})
				this.isErr = false
				this.isSuccess = false
				this.leftDistance = 0
			})

		},
		// 日志打印
		printLog(...params) {
			console.log(JSON.stringify(params));
		},
		// 滑块初始位置
		touchstart(e) {
			// console.log("---touchstart---", e)
			let startX = e.changedTouches[0].pageX;
			let startY = e.changedTouches[0].pageY;
			this.captchaData.startX = startX;
			this.captchaData.startY = startY;
			const pageX = this.captchaData.startX;
			const pageY = this.captchaData.startY;
			const startTime = this.captchaData.startTime;
			const trackArr = this.captchaData.trackArr;
			trackArr.push({
				x: pageX - startX,
				y: pageY - startY,
				type: "down",
				t: (new Date().getTime() - startTime.getTime())
			})
			this.printLog('start', startX, startY)
		},
		// 滑块滑动中位置
		touchmove(e) {
			let pageX = Math.round(e.changedTouches[0].pageX);
			let pageY = Math.round(e.changedTouches[0].pageY);
			const startX = this.captchaData.startX;
			const startY = this.captchaData.startY;
			const startTime = this.captchaData.startTime;
			const end = this.captchaData.end;
			const bgImageWidth = this.captchaData.background_image_width;
			const trackArr = this.captchaData.trackArr;
			let moveX = pageX - startX;
			const track = {
				x: pageX - startX,
				y: pageY - startY,
				type: "move",
				t: (new Date().getTime() - startTime.getTime())
			};
			trackArr.push(track);
			// console.log("moveX", moveX)
			if (moveX < 0) {
				moveX = 0;
			} else if (moveX > end) {
				moveX = end;
			}
			this.captchaData.moveX = moveX;
			this.captchaData.movePercent = moveX / bgImageWidth;
			this.printLog("move", track)
		},
		// 滑块停止滑动
		touchend(e) {
			this.captchaData.stopTime = new Date()
			let pageX = Math.round(e.changedTouches[0].pageX);
			let pageY = Math.round(e.changedTouches[0].pageY);
			const startX = this.captchaData.startX;
			const startY = this.captchaData.startY;
			const startTime = this.captchaData.startTime;
			const trackArr = this.captchaData.trackArr;
			const track = {
				x: pageX - startX,
				y: pageY - startY,
				type: "up",
				t: (new Date().getTime() - startTime.getTime())
			}
			trackArr.push(track);
			this.printLog("up", track)
			this.setVertifyData()
		},
		// 滑块绑定卡片移动距离
		StartMove(e) {
			this.xpos = e.detail.x
			// console.log("xpos", this.xpos)
			this.$nextTick(() => {
				this.colorWidth = this.xpos + uni.upx2px(80)
				this.leftDistance = this.xpos
			})
		},
		// 获取背景图和滑块图片
		getVerifyData() {
			// console.log('---getVerifyData---')
			let that = this
			// 需要更改为自己的请求
			this.$http.post(`${process.env.VUE_APP_ADMIN_API}/captcha/gen`, {}, {
				custom: {
					noLoading: true
				}
			}).then(data => {
				// console.log("---/captcha/gen---", data)

				this.captchaData.id = data.id
				this.captchaData.background_image = data.captcha.backgroundImage
				this.captchaData.slider_image = data.captcha.templateImage
				// this.captchaData.end = data.captcha.backgroundImageWidth - data.captcha
				// 	.templateImageWidth
				this.$nextTick(() => {
					// 获取当前设备上渲染的背景图和滑块尺寸
					let query = uni.createSelectorQuery().in(this)
					query.select('#bg').boundingClientRect(res => {
						this.bgImg.width = res.width
						this.bgImg.height = res.height
					}).exec();
					query.select('#slider-img').boundingClientRect(res => {
						this.sliderImg.width = res.width
						this.sliderImg.height = res.height
					}).exec();
					setTimeout(() => {
						this.captchaData.end = this.bgImg.width - uni.upx2px(40)
						this.initConfig(this.bgImg.width, this.bgImg.height, this.sliderImg
							.width, this
								.sliderImg.height, this.captchaData.end)
					}, 500)
				})

			}).catch(err => {
				console.log(err);
			})
		},
		// 初始化配置
		initConfig(bgImageWidth, bgImageHeight, sliderImageWidth, sliderImageHeight, end) {
			this.captchaData.background_image_width = bgImageWidth
			this.captchaData.background_image_height = bgImageHeight
			this.captchaData.slider_image_width = sliderImageWidth
			this.captchaData.slider_image_height = sliderImageHeight
			this.captchaData.end = end
		},
		// 校验是否成功
		setVertifyData() {
			const dataForm = {
				id: this.captchaData.id,
				data: {
					bgImageWidth: this.captchaData.background_image_width,
					bgImageHeight: this.captchaData.background_image_height,
					// sliderImageWidth: this.captchaData.slider_image_width,
					// sliderImageHeight: this.captchaData.slider_image_height,
					// startSlidingTime: this.captchaData.startTime,
					// endSlidingTime: this.captchaData.stopTime,
					startTime: this.captchaData.startTime,
					stopTime: this.captchaData.stopTime,
					trackList: this.captchaData.trackArr
				}
			}
			this.printLog("dataForm", dataForm)
			// 更改为自己的请求
			this.$http.post(`${process.env.VUE_APP_ADMIN_API}/captcha/check`, dataForm, {
				custom: {
					noLoading: true
				}
			}).then((res) => {
				// console.log("---/captcha/check---", res)
				if (res.code == 200) {
					if (res.success) {
						this.isSuccess = true
						let tm = setTimeout(() => {
							clearTimeout(tm)
							this.close()
							this.$emit('success', res.data.id)
						}, 1000)
					}
				} else {
					if (res.code == 4001) {
						this.isErr = true
						this.errorText = "验证失败，请重新尝试！"
					}
					else if (res.code == 4000) {
						this.isErr = true
						this.errorText = "验证码被黑洞吸走了！"
					}
					else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					let tm = setTimeout(() => {
						clearTimeout(tm)
						this.refresh()
					}, 1000)
				}
			}).catch(err => {
				console.log(err);
				this.refresh()
			})
		},
		// 刷新滑块
		refresh() {
			this.isActive = false
			this.$nextTick(() => {
				this.isActive = true
			})
			this.colorWidth = 0
			this.x = this.xpos
			this.$nextTick(function () {
				this.x = 0
				this.colorWidth = uni.upx2px(80)
			})

			this.isErr = false
			this.isSuccess = false
			this.leftDistance = 0
			this.captchaData.trackArr = []
			this.getVerifyData()
		}
	}
}
</script>

<style scoped lang="scss">
.verify-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
	overflow: hidden;

	.verify-code {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 640rpx;
		max-height: 740rpx;
		background-color: #FFFFFF;
		padding: 40rpx 0 20rpx;
		z-index: 999;
		box-shadow: 0 0 10rpx rgba(227, 227, 227, 0.7);
		border-radius: 10px;
		overflow: hidden;

		// .verify-title {
		// 	width: 100%;
		// 	text-align: center;
		// 	line-height: 1;
		// 	font-size: 40rpx;
		// 	font-weight: 800;
		// 	margin: 20rpx 0;
		// }

		.verify-tip {
			font-size: 32rpx;
			font-weight: bold;
			color: #686868;
			padding: 0 20rpx;
		}


		.verify-content {
			width: 100%;
			padding: 20rpx 20rpx;
			background-color: #ffffff;
			box-sizing: border-box;
			overflow: hidden;

			.verify-body {
				width: 100%;
				height: 360rpx;
				border-radius: 6px;
				position: relative;
				overflow: hidden;

				.verify-bg {
					width: 100%;
					height: 100%;
					position: absolute;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.verify-slider {
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;

					image {
						overflow: hidden;
						width: 55px;
						height: 100%;
						position: relative;
					}
				}
			}

			.move-area {
				overflow: hidden;
				width: 100%;
				height: 80rpx;
				margin-top: 20rpx;
			}

			.move-block {
				width: 100%;
				height: 100%;
				background-color: #f0f0f0;
				border-radius: 100rpx;
				position: relative;
				overflow: hidden;

				.move-shadow {
					height: 100%;
					width: 4px;
					background-color: rgba(255, 255, 255, 0.5);
					position: absolute;
					top: 0;
					left: 0;
					box-shadow: 1px 1px 1px #fff;
					border-radius: 50%;
					animation: moveAnimate 2s linear infinite;
				}

				@keyframes moveAnimate {
					0% {
						left: 0;
						opacity: 0.5;
					}

					50% {
						left: 50%;
						opacity: 1;
					}

					100% {
						left: 100%;
						opacity: 0.5;
					}
				}

				.color-change {
					height: 80rpx;
					border-radius: 100rpx;
					background-color: #c6a876;
					z-index: 2;
				}

				.block-button {
					// transform-origin: left center !important;
					border-radius: 100rpx;
					background-color: #b48d4d;
					;
					height: 80rpx;
					width: 80rpx;
					margin-top: -10rpx;
					touch-action: none;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					color: #fff;
				}

			}

			.check-status {
				position: absolute;
				left: 0;
				right: 0;
				bottom: -1px;
				height: 50rpx;
				line-height: 50rpx;
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #fff;

				&.check-success {
					background: #5ac725;
				}

				&.check-error {
					background: #f56c6c;
				}
			}

		}

		.verify-opts {
			display: flex;
			justify-content: flex-end;
			margin: 0 20rpx;

			.divide {
				height: 20px;
				width: 20rpx;
			}
		}
	}
}
</style>

具体应用

<template> 
    <div class="rob-button" @click="handleRobButton">抢券</div> 
    <tianai-verify-code ref="verifyRef" @success="verifySuccess"></tianai-verify-code> 
</template> 

<script> 
import tianaiVerifyCode from '@/components/tianai-verify-code/index'; 
export default { 
    components:{ 
        tianaiVerifyCode, 
    }, 
    methods: { 
        handleRobButton(){ 
            this.$refs?.verifyRef?.open() 
        }, 
        verifySuccess(){ 
            this.toRobCoupon() 
        } 
    } 
} 
</script>