---
name: "web-view"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "web-view - 承载网页的容器"
---

## web-view

> [VERSION] 基础库 >= 2.10.0

### 描述

WebView 组件，用于承载网页内容。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `src` | `string` | 是 | `""` | 网页链接 |

#### 事件

| 事件名 | 类型 | 描述 |
| --- | --- | --- |
| `message` | `(event: WebViewMessageEvent) => void` | 网页向小程序 postMessage 时触发 |
| `load` | `(event: WebViewLoadEvent) => void` | 网页加载成功时触发 |
| `error` | `(event: WebViewErrorEvent) => void` | 网页加载失败时触发 |

**WebViewMessageEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"message"` | 事件类型 |
| `detail` | `unknown` | webview 向小程序发送的消息数据 |

**WebViewLoadEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"load"` | 事件类型 |
| `detail` | `WebViewLoadDetail` | 事件数据 |

**WebViewErrorEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"error"` | 事件类型 |
| `detail` | `WebViewErrorDetail` | 事件数据 |

### 示例代码

#### 基础用法

*index.tyml*

```xml
<web-view
  src="{{url}}"
  bindload="onLoad"
  binderror="onError"
></web-view>
```

*index.tyss*

```css
web-view {
  width: 100%;
  height: 100vh;
}
```

*index.js*

```javascript
Page({
  data: {
    url: 'https://www.tuya.com',
  },
  onLoad(e) {
    console.log('网页加载成功:', e.detail.src);
  },
  onError(e) {
    console.log('网页加载失败:', e.detail.errMsg);
  },
});
```

#### 监听网页消息

*index.tyml*

```xml
<web-view
  src="{{url}}"
  bindmessage="onMessage"
  bindload="onLoad"
></web-view>
```

*index.tyss*

```css
web-view {
  width: 100%;
  height: 100vh;
}
```

*index.js*

```javascript
Page({
  data: {
    url: 'https://www.tuya.com',
  },
  onMessage(e) {
    console.log('收到网页消息:', e.detail);
  },
  onLoad(e) {
    console.log('加载完成:', e.detail.src);
  },
});
```


### 相关文档
网页向小程序 postMessage 时，请使用 [@tuya-miniapp/jssdk](https://www.npmjs.com/package/@tuya-miniapp/jssdk) 进行操作，详细用法请查看 [jssdk 文档](@tuya-miniapp/jssdk](https://www.npmjs.com/package/@tuya-miniapp/jssdk)