@webank/trident-plugin-webview

WebView - WeTrident Plugin

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

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

Install

``
$ tdt plugin add @webank/trident-plugin-webview
`

Usage

$3

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

JS SDK

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

$3

Toast

`
TridentWebViewBridge.send('toast', {
text: 'hello world'
}, res => {
console.log('调用成功', res)
}, err => {
console.log('调用失败', err)
})
`

Loading

显示/隐藏 trident 的Loading组件

* show: [Boolean] - 显示/隐藏Loading组件

`
TridentWebViewBridge.send('loading', {
show: true
}, res => {
console.log('调用成功', res)
}, err => {
console.log('调用失败', err)
})
`

setNavBarRightButton

自定义导航栏右边按钮

* show: [Boolean] - 显示/隐藏导航栏右边按钮
* text: [String] - 导航栏按钮文字，默认显示为···

`
TridentWebViewBridge.send('setNavBarRightButton', {
show: true,
text: '完成'
}, res => {
console.log('点击导航栏', res)
})
`

$3

`
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 调用后立即返回结果

`
// in trident proj
WebViewService.addApiHandler('syncApi', args => {
console.log('接收api参数', args)
})


// in web
TridentWebViewBridge.send('syncApi', {
params: 'test'
}, res => {
console.log('调用成功', res)
})
`

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

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

`
// in trident proj
WebViewService.addAsyncApiHandler('asyncApi', args => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK')
}, 3000)
})
})


// in web
TridentWebViewBridge.send('asyncApi', {
params: 'test'
}, res => {
console.log('promise.resolve', res)
}, err => {
console.log('promise.reject', err)
})
``