
在 uni-app 的 App 端用 plus.webview.create 加载本地 verify 页面,集成阿里云滑动验证码,并通过 uni.postMessage 把验证结果回传主应用。
在 uni-app 的 App 端,用 plus 创建 web-view 来加载本地 verify 页面(本地 HTML 放在根目录 /hybrid/html 中),以支持阿里云验证码:
appCreateVerify() {
// 阿里云验证码:App 打开本地 verify 页面
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 页面方面:结构上包含验证容器、弹窗包装器、标题、提示文本和阿里云验证码容器,并引入阿里云验证码 SDK 与 uni-app webview SDK;样式上定义透明背景、固定定位的验证框、居中布局、圆角白色弹窗等;脚本里监听 plusready 事件,初始化阿里云验证码模块、配置 appkey 与 scene 参数,定义 success、fail、error 回调,验证成功时通过 uni.postMessage 把数据传回主应用。
