uniap app端使用plus创建web-view方法，支持阿里云验证码
|
appCreateVerify() { // 阿里云验证码 App打开本地verify页面（uni-app本地html存放在根目录/hybrid/html中） if (this.wv) { return this.wv.show() } this.wv = plus.webview.create('', 'custom-webview', { 'uni-app': 'none', background: 'transparent', webviewBGTransparent: true }, { appkey: "xxxxxxxxxxxxxx", scene: "nc_other_app", verifyTitle: this.lang.verifyTitle, verifyTips: this.lang.verifyTips }) this.wv.loadURL('/hybrid/html/app/awscVerify.html') const currentWebview = this.$scope.$getAppWebview() // 此处监听uni.postMessage传递参数 plus.globalEvent.addEventListener('plusMessage', msg => { const result = msg.data.args.data if(result.name == 'postMessage'){ this.activateCard(result.arg) } }) currentWebview.append(this.wv) },
|
html页面内容
|
<html lang="en"> <head> <meta charset="utf-8" /> <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script> <!-- uni 的 SDK --> <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" /> <style> html,body{ margin: 0; padding: 0; background: transparent; text-align: center; font-family:"PingFangSC-Regular","PingFang SC"; font-size: 15px; } .verify-container { position: fixed; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0, 0, 0, .5); display: flex; justify-content: center; align-content: center; } .popup-wrapper { position: absolute; top: 50%; left: 5%; right: 5%; height: 180px; margin-top: -90px; background: #FFFFFF; border-radius: 10px; padding: 0 20px; box-sizing: border-box; } .popup-title{ font-size: 16px; font-weight: bold; border-bottom: 1px solid #efefef; padding: 12px 0; text-align: center; } .popup-tips{ text-align: center; margin-top: 20px; } .popup-content { box-sizing: border-box; margin-top: 20px; text-align: center; width: 100%; display: flex; justify-content: center; align-content: center; } .nc-container{ width: 75vw !important; } </style> </head> <body> <div class="verify-container"> <div class="popup-wrapper"> <div class="popup-title" id="verifyTitle"></div> <div class="popup-tips" id="verifyTips"></div> <div class="popup-content"> <div class="nc-container" id="nc"></div> </div> </div> </div> </body> </html> <script> document.addEventListener('plusready', function() { setTimeout(()=>{ var wv = plus.webview.currentWebview() document.getElementById("verifyTitle").innerText = wv.verifyTitle document.getElementById("verifyTips").innerText = wv.verifyTips // 阿里云滑动验证 AWSC.use("nc", function (state, module) { // 初始化 window.nc = module.init({ // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。 appkey: wv.appkey, //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。 scene: wv.scene, // 声明滑动验证需要渲染的目标ID。 renderTo: "nc", //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。 success: function (data) { uni.postMessage({ data }) window.nc.reset() wv.hide() }, // 滑动验证失败时触发该回调参数。 fail: function (failCode) { console.log(failCode) }, // 验证码加载出现异常时触发该回调参数。 error: function (errorCode) { console.log(errorCode) } }); }) },100) }) </script>
|