---
name: "WebView"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.6.9" }
title: "WebView - 承载网页的容器"
---

## WebView

> [VERSION] @ray-js/ray >= 0.6.9

### 描述

承载网页的容器；在小程序中通常会铺满整个页面。 当页面存在 web-view 标签时，其他标签将不展示，且不支持设置任何样式！

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `src` | `string` | 否 | `""` | webview 指向网页的链接，需登录小程序管理后台, 进入小程序详情页->开发设置->多区服务器域名->webview 合法域名 进行webview 域名配置。 |
| `onError` | `(event: WebViewErrorEvent) => void` | 否 | - | 网页加载失败时触发 |
| `onLoad` | `(event: WebViewLoadEvent) => void` | 否 | - | 网页加载成功时触发 |
| `onMessage` | `(event: WebViewMessageEvent) => void` | 否 | - | 网页向小程序 postMessage 时，在特定时机（小程序后退、组件销毁、分享）触发并收到消息 |
| `updateLayout` | `unknown` | 否 | - | 用来异层组件通知容器层样式更新 |

### 引用对象

##### `interface` WebViewErrorEvent

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `detail` | `WebViewErrorDetail` |  |

##### `interface` WebViewLoadEvent

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `detail` | `WebViewLoadDetail` |  |

##### `interface` WebViewMessageEvent

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `detail` | `WebViewMessageDetail` |  |

##### `interface` WebViewErrorDetail

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `url` | `string` | 网页链接 |
| `fullUrl` | `string` | 加载失败时的完整 URL |
| `errMsg` | `string` | 错误信息 |

##### `interface` BaseEvent

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `type` | `string` | 事件类型 |
| `timeStamp` | `number` | 页面打开到触发事件所经过的毫秒数 |
| `target` | `Target` | 触发事件的源组件 |
| `currentTarget` | `Target` | 当前组件的一些属性值集合 |
| `mark` | `any` | 事件标记数据 |

##### `interface` WebViewLoadDetail

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `src` | `string` | 网页链接 |

##### `interface` WebViewMessageDetail

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `data` | `unknown[]` | 多次 postMessage 的参数组成的数组 |

##### `interface` Target

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `id` | `string` | 事件源组件的id |
| `dataset` | `Record<string, unknown>` | 事件源组件上的 `dataset` 自定义属性组成的集合 |


### 示例代码

#### 基础用法

```tsx
import React from 'react';
import { WebView, View } from '@ray-js/ray';

export default function () {
  return (
    <WebView
      src="https://www.tuya.com"
      onLoad={(e) => console.log('网页加载成功:', e.detail.src)}
      onError={(e) => console.log('网页加载失败:', e.detail)}
    />
  );
}
```


<DemoBlock 
  githubUrl="https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/rayWebView" 
  qrCodeUrl="/images/qrCode/rayWebView.png" 
  lang="zh">
</DemoBlock>