WebView

WeTrident 项目的 WebView 插件，支持以下特性

  • 页面标题自动切换
  • JS SDK，可自定义处理api
  • 错误重试视图

Install

  1. $ tdt plugin add @webank/trident-plugin-webview

Usage

页面加载

  1. AppNavigator.tridentPluginWebview.WebViewScene({
  2.   url: 'https://www.webank.com'
  3. })

JS SDK

WeTrident WebView 会在 window 上挂载TridentWebViewBridge属性，通过该属性可以调用 WebView 的内置 api 与自定义 api。

内置 API

Toast

  1. TridentWebViewBridge.send('toast', {
  2.   text: 'hello world'
  3. }, res => {
  4.   console.log('调用成功', res)
  5. }, err => {
  6.   console.log('调用失败', err)
  7. })

Loading

显示/隐藏 trident 的Loading组件

  • show: [Boolean] - 显示/隐藏Loading组件
  1. TridentWebViewBridge.send('loading', {
  2.   show: true
  3. }, res => {
  4.   console.log('调用成功', res)
  5. }, err => {
  6.   console.log('调用失败', err)
  7. })

setNavBarRightButton

自定义导航栏右边按钮

  • show: [Boolean] - 显示/隐藏导航栏右边按钮
  • text: [String] - 导航栏按钮文字，默认显示为···
  1. TridentWebViewBridge.send('setNavBarRightButton', {
  2.   show: true,
  3.   text: '完成'
  4. }, res => {
  5.   console.log('点击导航栏', res)
  6. })

自定义 API

  1. import WebViewService from '@webank/trident-plugin-webview/services/WebViewService'

开发者可以增加 WebView 处理的 api 列表，通过WebViewService.addApiHandler和WebViewService.addAsyncApiHandler进行注册 api。

1. WebViewService.addApiHandler(key:String, handler:function)

添加同步处理 api，WebView 调用后立即返回结果

  1. // in trident proj
  2. WebViewService.addApiHandler('syncApi', args => {
  3.   console.log('接收api参数', args)
  4. })
  7. // in web
  8. TridentWebViewBridge.send('syncApi', {
  9.   params: 'test'
  10. }, res => {
  11.   console.log('调用成功', res)
  12. })

2. WebViewService.addAsyncApiHandler(key:String, handler:function)

添加异步处理 api，hanlder返回promise

  1. // in trident proj
  2. WebViewService.addAsyncApiHandler('asyncApi', args => {
  3.   return new Promise((resolve, reject) => {
  4.     setTimeout(() => {
  5.       resolve('OK')
  6.     }, 3000)
  7.   })
  8. })
  11. // in web
  12. TridentWebViewBridge.send('asyncApi', {
  13.   params: 'test'
  14. }, res => {
  15.   console.log('promise.resolve', res)
  16. }, err => {
  17.   console.log('promise.reject', err)
  18. })