uni-app App 端用 plus 创建 web-view,支持阿里云验证码

技术分享 2023-12-11
uni-app App 端用 plus 创建 web-view,支持阿里云验证码

在 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 把数据传回主应用。