npm package: @feidao-msz/fd-m000000
Description: 内置浏览器
Author: taoqf
Latest version: 4.6.201908231034

<!-- TOC -->

- [Tag](#tag)
- [Installation](#installation)
- [Attributes](#attributes)
	- [`fd`](#fd)
	- [`uri`](#uri)
	- [progressOuterImage](#progressouterimage)
	- [progressInnerImage](#progressinnerimage)
	- [`progressBarColor`](#progressbarcolor)
	- [`startInLoadingState`](#startinloadingstate)
	- [`showsHorizontalScrollIndicator`](#showshorizontalscrollindicator)
	- [`showsVerticalScrollIndicator`](#showsverticalscrollindicator)
	- [`scalesPageToFit`](#scalespagetofit)
	- [`mediaPlaybackRequiresUserAction`](#mediaplaybackrequiresuseraction)
	- [`originWhitelist`](#originwhitelist)
	- [`cacheEnabled`](#cacheenabled)
- [Method](#method)
	- [`fire(action: string, msg: unknown, timeout: number)`](#fireaction-string-msg-unknown-timeout-number)
- [Events](#events)
	- [`fd-events-webview-ready`](#fd-events-webview-ready)
	- [`fd-events-webview-load`](#fd-events-webview-load)
	- [`fd-events-webview-loadend`](#fd-events-webview-loadend)
	- [`fd-events-webview-loadstart`](#fd-events-webview-loadstart)
	- [`fd-events-webview-error`](#fd-events-webview-error)
- [mobile和h5通信补充说明](#mobile和h5通信补充说明)
- [mobile和h5 cookie共享](#mobile和h5-cookie共享)

<!-- /TOC -->

# WebView控件

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

## Tag

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

## Installation

```sh
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页面的事件名，参数，和超时时间`

```ts
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通信补充说明

![WebView事件执行顺序](https://dfeidao.gitee.io/widgets-mobile/images/fd-m000000/1.png)

![WebView和h5互相通信](https://dfeidao.gitee.io/widgets-mobile/images/fd-m000000/2.png)

h5端调用mobile端事件

[原子操作文档](https://dfeidao.gitee.io/atom-web/modules/native____.html)

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

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

mobile端调用h5端事件

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