@dfeidao/fd-m000000 v4.6.201906191752-test

• Tag
• Installation
• Link
• 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
yarn add --dev react-native-webview

Link

react-native link react-native-webview

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端对应事件，返回的数据
console.log('aaaaaaaaaa', ret);

Events

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

fd-events-webview-ready

准备事件

fd-events-webview-load

加载事件

fd-events-webview-loadend

加载结束事件

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