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-m000000Attributes
fd
fd
uri
源地址
html
富文本内容。如果要设置富文本的内容不可被缩放，可以在head内添加一下标签
<meta name="viewport" content="user-scalable=0">progressOuterImage
进度条的环部分
progressInnerImage
进度条的中间部分
progressBarColor
进度条的颜色(顶部)
startInLoadingState
开始加载视图 (可选项)
showsHorizontalScrollIndicator
显示水平滚动指示器 (可选项)
showsVerticalScrollIndicator
显示垂直滚动指示器 (可选项)
scalesPageToFit
控制内容是否缩放到适合比例,并允许用户更改比例.默认为 true (可选项)
mediaPlaybackRequiresUserAction
在h5音乐或视频播放前是否需要用户操作,默认为 true (可选项)
originWhitelist
白名单,默认为 ['http://','https://'] (可选项)
cacheEnabled
是否启用缓存,默认为 true (可选项)
loadingBackgroundColor
加载时的控件的背景颜色
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端，发送登录请求。