先看代码,复制使用即可,这是一个uniaap和vue版本的行为验证,不同的区别是他们将使用不同的包,包文件我已放在本人文件下载资源中,您将看到以下效果(请看完gif图,中间有过度时间有些长)。感谢captcha 团队的开源支持 附送连接,您对滑块验证有后端,html端,weex,reactnative,android,ios等多端的需求请访问 https://captcha.anji-plus.com/#/
第一步 下载本人提供的压缩包 解压之后放进项目任意位置,你可以将其视为组件,放进您的组件目录地址如下:
第二步 npm install crypto-js -S 然后复制以下代码即可看到效果(如果您是vue 请执行 npm install axios crypto-js -S)
<template>
<view> <!-- mode取值为fiexd,pop 如果是pop 就会隐藏 需要您调用.show()方法 -->
<Verify @success="success" mode="fixed" captchaType="clickWord"
:imgSize="{ width: '330px', height: '155px' }" ref="verify">
<!-- captchaType是验证方式:取值为blockPuzzle滑动clickWord字体依次点击 imgSize图片的大小对象-->
</Verify>
<button @click="useVerify">调用验证组件</button>
</view>
</template>
<script>
//引入组件 需要您引入正确路径 (资源包命名可能有所不同)
import Verify from "../../verify/verify.vue";
export default {
name: 'app',
components: {
Verify
},
methods: {
success(params) {
console.log(params)
// params 返回的二次验证参数, 和登录参数一起回传给登录接口,方便后台进行二次验证
},
useVerify() {
this.$refs.verify.show()
}
}
}
</script>
</script>
<style>
</style>
附加和可能出现的有用信息已添加注释
其他有关uniapp的疑问或者此方法不理解的地方您可留言,我会尽快回复并帮您解决。