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端,发送登录请求。