更新记录

1.0.2（2025-07-10） 下载此版本

format code

1.0.1（2025-07-10） 下载此版本

修复CONCAT类型slider高度

1.0.0（2025-07-10） 下载此版本

初始化

平台兼容性

uni-app

验证码组件使用说明

如需原生小程序语法支持，请联系我 1326632@qq.com

说明

原 tianai-captcha 仅支持 pc 端，不支持 uniapp 及原生小程序，所以重新封装。由于开发时间有限，我没有从头一点点码代码，而是从 uniapp 的插件市场搜索到一款他人封装好的插件（x-verify-code），此插件就是基于 tianai-captcha 封装，但此插件只支持滑块，经过阅读tianai-captcha-web-sdk 源码，经过部分改动，结合我们项目的特点，成功将天爱验证码小程序 uniapp 版本插件搞定，支持滑块、旋转、拼接、点选四种验证方式。

此插件仅供学习参考，仅支持 uniapp 小程序，可以在此基础上进行二次开发，更换为自己框架语法即可。

因为涉及到后端接口，所以需要自行搭建天爱验证码服务端。具体搭建步骤可以参考官方文档：天爱验证码

组件功能

• 支持四种验证类型：滑块验证（SLIDER）、拼接验证（CONCAT）、旋转验证（ROTATE）、点选验证（WORD_IMAGE_CLICK）
• 记录用户操作轨迹，提高验证安全性
• 提供验证成功/失败反馈
• 支持刷新验证码和关闭验证功能

使用截图

组件引入

1. 将组件文件放入项目组件目录
2. 在需要使用的页面中引入组件：

import verifyCode from "@/uni_modules/tianai-mini-captcha/components/tianai-mini-captcha";

3. 注册组件：

components: {
  verifyCode;
}

基本用法

<verify-code
  ref="verifyCode"
  :type="verifyType"
  :conf="verifyConf"
  @success="onVerifySuccess"
></verify-code>

属性说明

事件说明

方法说明

使用示例

1. 基本使用

// 页面中
data() {
  return {
    verifyType: 'SLIDER', // 默认滑块验证
      verifyConf:{
        // 生成验证码接口
            gen:'https://xxxxx/api/captcha/get',
        // 验证接口
            validate:'https://xxxxx/api/captcha/validate'
      },
  }
},
methods: {
  // 打开验证码
  showVerify() {
    this.$refs.verifyCode.open()
  },
  // 验证成功回调
  onVerifySuccess(id) {
    console.log('验证成功，验证码ID：', id)
    // 执行后续操作，如登录、提交表单等
  }
}

2. 切换验证类型

<view>
  <button @click="changeType('SLIDER')">滑块验证</button>
  <button @click="changeType('CONCAT')">拼接验证</button>
  <button @click="changeType('ROTATE')">旋转验证</button>
  <button @click="changeType('WORD_IMAGE_CLICK')">点选验证</button>
  <button @click="showVerify">打开验证</button>
  <verify-code
    ref="verifyCode"
    :type="verifyType"
    :conf="verifyConf"
    @success="onVerifySuccess"
  ></verify-code>
</view>

methods: {
  changeType(type) {
    this.verifyType = type
  }
}

注意事项

1. 接口配置：组件中requestURL属性需要配置为实际的后端接口地址，用于获取验证码和验证结果

2. 图片资源：组件使用了 base64 格式的刷新和关闭图标，如需替换，可修改refreshIcon和closeIcon属性

3. 样式调整：组件使用 scss 编写样式，可根据实际需求在 style 标签中修改样式

4. 验证逻辑：

   • 滑块/旋转/拼接验证：拖动滑块完成验证
   • 点选验证：按提示依次点击图片中的对应元素

5. 兼容性：组件基于 uni-app 开发，兼容 H5、微信小程序等平台，其他平台可能需要做适当调整

常见问题

1. Q: 验证码图片不显示？ A: 检查conf是否配置正确，确保后端接口能正常返回图片数据 B: 检查小程序安全域名

2. Q: 滑块拖动无反应？ A: 检查是否正确引入组件，以及是否有其他元素遮挡了滑块区域

3. Q: 如何自定义验证码弹窗样式？ A: 可修改组件内的 style 样式，或通过深度选择器在父组件中覆盖样式