【uni-app+uview h5】 接入阿里云滑动验证

一、uni-app 引入外部资源

 //在app.vue中引入 

<script>
    var script = document.createElement('script');
    script.src = "https://g.alicdn.com/AWSC/AWSC/awsc.js";
    document.body.appendChild(script);
    script.onload = function() {
        console.log('js onload')
    }
</script>

二、uni-app 封装滑动组件及引用

1、在component创建一个slide-verify.vue组件

<template>
	<view id="__nc">
		<view id="nc"></view>
	</view>
</template>

<script>
	export default {
		name: "slide-verify",
		data() {
			return {};
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				const _this = this
				// 实例化nc
				AWSC.use("nc", function(state, module) {
					// 初始化
					let option = {
						appkey: "XXX",
						//使用场景标识。
						scene: "XXX",
						// 声明滑动验证需要渲染的目标ID。
						renderTo: "nc",
						width: "300",
						//前端滑动验证通过时 返回 会话ID（sessionId）、签名串（sig）、请求唯一标识（token）
						success: function(data) {
							_this.$emit('seccess', data)
						},
						// 滑动验证失败
						fail: function(failCode) {
							window.console && console.log(failCode)
						},
						// 验证码加载出现异常
						error: function(errorCode) {
							window.console && console.log(errorCode)
						}
					}
					window.nc = module.init(option);
				})


			}
		}
	}
</script>

<style>
	#__nc {
		position: relative;
		width: 300px;
		height: 60px;
		margin: o auto;
		text-align: center;
	}

	#nc {
		bottom: 0;
		left: 50%;
		transform: translate(-50%);
	}

	.nc-container #nc_1_wrapper {
		width: 100% !important;
	}

	.nc-container .nc_scale span {
		height: 35px !important;
		line-height: 35px !important;
	}
</style>

2、使用组件

import slideVerify from "../../components/slide-verify.vue";

components —— slideVerify

<slideVerify @seccess="slideYzSeccess" v-if="slideVerifyShow == false"></slideVerify>

//滑动验证成功
slideYzSeccess(data) {//会话ID（sessionId）、签名串（sig）、请求唯一标识（token）
       console.log(this.slideYzSeccessData)
},

三、u-popup 组件中初始化滑动验证，打包发布后不能滑动

1、搜索资料后得出 u-popup   使用@touchmove.stop.prevent 阻止滑动穿透 ，影响弹出层内容滑动，可以考虑直接去掉 @touchmove.stop.prevent （未试）

2、不使用u-popup组件，自定义弹窗 （问题解决）

四、另一个接入方法

将阿里云写成一个html模版，通过web-view引入，postMessage传参