uniapp使用网易易盾

插件地址：https://ext.dcloud.net.cn/plugin?id=1617

创建组件yidunCaptcha.vue

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
			<ne-captcha
				v-if="captchaId"
				:captchaId="captchaId"
				:width="width"
				:lang="lang"
				:customStyles="customStyles"
				@verify="handleBindVerify($event.detail)"
				@error="handleError($event.detail)"
				id="neCaptcha" />
		<!-- #endif -->
		<!-- #ifdef H5 -->
			<view id="captcha"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		props: {
			isSense: false,
			captchaId: String,
			width: {
				type: [String, Number],
				default: 320
			},
			lang: {
				type: String,
				default: 'zh-CN'
			},
			customStyles: {
				type: Object,
				default: () => ({})
			},
			timeout: {
				type: Number,
				default: 12000
			}, // 客户端初始化超时时长
			dimAmount: Number, // 仅限客户端
			isToutchOutsideDisappear: Boolean, // 仅限客户端
			isHideCloseBtn: Boolean, // 仅限客户端
			useDefaultFallback: {
				type: Boolean,
				defaultL: true
			}, // 降级仅限客户端，h5端若要使用降级，请接入降级方案，参考官网
			failedMaxRetryCount: {
				type: Number,
				default: 3
			} // 降级配置,仅限客户端
		},
		data() {
			return {
				captchaIns: null,
				options: null
			}
		},
		created () {
			this.initNeCaptcha()
		},
		destroyed () {
			this.captchaIns = null
		},
		methods: {
			initNeCaptcha () {
				// #ifdef H5
				// h5其他配置项请参考文档
				const options = {
					captchaId: this.captchaId,
					width: this.width,
					lang: this.lang,
					element: '#captcha',
					protocol: 'https',
					enableClose: this.isHideCloseBtn,
					customStyles: this.customStyles,
					onVerify: (err, data) => {
						!err && this.handleVerify(data.validate)
					}
				}
				if (this.isSense) {
					options.mode = 'bind'
				} else {
					options.mode = 'popup'
				}
				
				initNECaptcha({ ...options }, ins => {
					this.captchaIns = ins
				}, err => {
					this.handleError(err)
				})
				// #endif
				
				// #ifdef MP-WEIXIN
					this.captchaIns = this.selectComponent('#neCaptcha')
				// #endif
				
				// #ifdef APP-PLUS
				let appCustom = {}
				if (this.customStyles && this.customStyles.icon) {
					const { slider } = this.customStyles.icon
					appCustom = {
						'control_bar_start_url': slider,
						'control_bar_moving_url': slider,
						'control_bar_error_url': slider
					}
				}
				this.captchaIns = uni.requireNativePlugin('YD-Captcha')
				this.captchaIns.init({
					...appCustom,
					'captcha_id': this.captchaId,
					'is_no_sense_mode': this.isSense,
					'language_type': this.lang,
					'dimAmount': this.dimAmount,
					'is_touch_outside_disappear': this.isToutchOutsideDisappear,
					'timeout': this.timeout,
					'is_hide_close_button': this.isHideCloseBtn,
					'use_default_fallback': this.useDefaultFallback,
					'failed_max_retry_count': this.failedMaxRetryCount
				}, (data) => {
					console.log(data);
					if (data.validate) {
						this.handleVerify(data.validate)
					} else {
						this.handleError(data)
					}
				})
				// #endif
				
			},
			verify () {
				// #ifdef H5
					if(this.isSense) {
						this.captchaIns.verify()
					} else {
						this.captchaIns.popUp()
					}
				// #endif
				// #ifdef MP-WEIXIN
					// 传统验证码
					if (this.isSense) {
						this.captchaIns.verify()
					} else {
						this.captchaIns.popup()
					}
				// #endif

				// #ifdef APP-PLUS
				this.captchaIns.showCaptcha((data)=>{
					console.log(data);
				})
				// #endif
			},
			reset () {
				// #ifdef H5
					this.captchaIns.refresh()
				// #endif
				
				// #ifdef MP-WEIXIN
					this.captchaIns.reset()
				// #endif
				
				// 原生实现reset可以先销毁（destroyCaptha）再进行初始化
				// #ifdef APP-PLUS
				this.destroyCap()
				setTimeout(() => {
					this.initNeCaptcha()
				}, 0)
				// #endif
			},
			destroyCap () {
				// 小程序端销毁直接清空captchaId即可
				// #ifdef H5
					this.captchaIns.destroy()
				// #endif
				
				// #ifdef APP-PLUS
					this.captchaIns.destroyCaptcha()
				// #endif
			},
			handleError ({ code, msg, message } = {}) {
				const err = new Error( msg ? `Error ${code}"${msg}` : message)
				this.$emit('captchaError')
			},
			handleVerify (validate) {
				this.$emit('verify', validate)
			},
			handleBindVerify ([err, validate] = []) {
				!err && this.handleVerify(validate)
			}
		}
	}
</script>

父组件

html

<yidun-captcha captcha-id="你的网易易盾id" ref="captcha" :isSense="false"
@verify="handleCaptcha"></yidun-captcha>

js

import YidunCaptcha from '../../components/yidunCaptcha.vue';
export default {
		components: {
			YidunCaptcha
		},
		methods: {
			//直接投票
			tryToVerify() {
				this.$refs.captcha.verify();
				// setTimeout(() => {
				// 	this.tryReset()
				// }, 30000)
			},
			handleCaptcha(validate) {
				console.log(`code: ${validate}`);
				console.log(validate, "网易易盾");
				this.vote_now(validate);//发送请求
			},
			tryReset() {
				this.$refs.captcha.reset();
			},
},

在根目录下创建template.h5.html文件

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<!-- 正式发布的时候使用，开发期间不启用。↓ -->
        <!-- <script src="/h5/touch-emulator.js"></script>
		<script>
            TouchEmulator();
			if (document.documentElement.clientWidth > 1024) {
				window.location.href = '/h5/pcguide.html#'+location.pathname+location.search;
			}
		</script>
        <style>
            ::-webkit-scrollbar{
                display: none;
            }
        </style>
        <script>
            var _hmt = _hmt || [];
            (function() {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?";// 百度统计key
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
        </script> -->
        <!-- 正式发布的时候使用，开发期间不启用。↑ -->
		<script>
			document.addEventListener('DOMContentLoaded', function() {
				document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
			})
		</script>
		<script src="https://cstaticdun.126.net/load.min.js?t=201903281201"></script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
	</head>
	<body>
		<!-- 该文件为 H5 平台的模板 HTML，并非应用入口。 -->
		<!-- 请勿在此文件编写页面代码或直接运行此文件。 -->
		<!-- 详见文档：https://uniapp.dcloud.io/collocation/manifest?id=h5-template -->
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
		<script>
			/*BAIDU_STAT*/
		</script>
	</body>
</html>

引入template.h5.html