• Tag
• Installation
• Attributes
  • fd
  • uri
  • progressOuterImage
  • progressInnerImage
  • progressBarColor
  • startInLoadingState
  • showsHorizontalScrollIndicator
  • showsVerticalScrollIndicator
  • scalesPageToFit
  • mediaPlaybackRequiresUserAction
  • originWhitelist
  • cacheEnabled
• Method
  • fire(action: string, msg: unknown, timeout: number)
• Events
  • fd-events-webview-ready
  • fd-events-webview-load
  • fd-events-webview-loadend
  • fd-events-webview-loadstart
  • fd-events-webview-error
• mobile和h5通信补充说明
• mobile和h5 cookie共享

WebView控件

用来在整个页面或页面的部分位置嵌入h5页面。

Tag

<WebView style={{ width: 300, height: 400 }} fd={fd} ref="webview" uri="http://172.16.15.22:8000/login.html?date=20190613"></WebView>

Installation

yarn add --dev @dfeidao/fd-m000000

Attributes

fd

fd

uri

源地址

progressOuterImage

进度条的环部分

progressInnerImage

进度条的中间部分

progressBarColor

进度条的颜色(顶部)

startInLoadingState

开始加载视图 (可选项)

showsHorizontalScrollIndicator

显示水平滚动指示器 (可选项)

showsVerticalScrollIndicator

显示垂直滚动指示器 (可选项)

scalesPageToFit

控制内容是否缩放到适合比例,并允许用户更改比例.默认为 true (可选项)

mediaPlaybackRequiresUserAction

在h5音乐或视频播放前是否需要用户操作,默认为 true (可选项)

originWhitelist

白名单,默认为 ['http://','https://'] (可选项)

cacheEnabled

是否启用缓存,默认为 true (可选项)

Method

fire(action: string, msg: unknown, timeout: number)

移动端调h5端事件，传参h5页面的事件名，参数，和超时时间

import WebView from '@dfeidao/widgets-mobile/fd-m000000';

const ret = await webview.fire<string>('a003', { test: 'abc' }, 3000);
// 输出h5端对应事件，返回的数据

Events

事件监听在s.ts文件中添加即可

fd-events-webview-ready

h5端已准备好，app端可以向h5端发起调用了。该准备过程由h5端调用原子操作atom-web/native/ready完成。注意一个h5页面应当有且仅有一个组件调用atom-web/native/ready来实现与app端的通信。app的调用fire均调用回该组件。如果有多个组件需要与app进行通信，请在h5端使用组件间通信来完成。

fd-events-webview-load

加载h5页面静态资源结束，官方文档语嫣不详，此当为成功加载静态资源结束

fd-events-webview-loadend

加载h5静态资源结束，成功或失败均可发起此事件，如果在页面初始化之后由app端发起到h5的调用，请务必使用fd-events-webview-ready事件代替

fd-events-webview-loadstart

开始加载静态资源事件

fd-events-webview-error

静态资源加载出错事件

mobile和h5通信补充说明

h5端调用mobile端事件

原子操作文档

import fire from '@dfeidao/atom-web/native/fire';

const ret = await fire<string>('a004', 'test', 3000);

mobile端调用h5端事件

import WebView from '@dfeidao/widgets-mobile/fd-m000000';import get_widget from '@dfeidao/atom-mobile/dom/get-widget';

const webview = get_widget<WebView>(fd, 'webview-ref');
const ret = await webview.fire<string>('a003', { test: 'abc' }, 3000);

注意：webview.fire并没有要求传递组件编号，而是直接传事件编号和参数。其实他调用的是，h5端调用ready原子操作的组件的事件

mobile和h5 cookie共享

在移动端登录成功之后，h5端即可正常的请求服务

如果有极端的需求，非要在h5页面做登录功能。那么请把h5端获取到用户输入的登录校验信息传递到mobile端，发送登录请求。