webview 站点

是随着小程序一同发布的静态文件站点，减轻开发者部署静态 html 文件负担，支持离线模式的技术。开发者可以在小程序中使用 webview 组件加载 webview 站点，实现小程序与 webview 站点的无缝衔接。

webview 站点的特性

支持离线模式，提高访问速度支持与小程序逻辑层通信

webview 站点的使用

1. 声明 webview 站点文件目录

通过在 <code>app.json 中声明 webviewRoot 字段，指定 webview 站点文件目录，如下：

// app.json

{

"pages": [

"pages/index/index"

],

"webviewRoot": "my-webview"

}

则小程序会以 webviewRoot 字段指定的目录进行部署，加载 webview 站点文件。

目录结构如下：

├── app.json

└── pages

├── index

│ ├── index.js

│ ├── index.json

│ ├── index.tyml

│ └── index.tyss

└── my-webview

├── index.html

└── index.js

注意：webviewRoot 字段只能在 app.json 中声明一次，且只能声明一次，使用相对路径，不支持绝对路径。注意目录的关系。

2. 使用 webview 组件加载 webview 站点

站点协议为 webview://，在小程序页面中使用 webview 组件，如下：

<!-- pages/index/index.tyml -->

<web-view id="yourId" src="webview://my-webview/index.html" bind:message="message" bind:load="load" bind:error="error" />code>

其中 src 属性的值为 webview:// 开头，后面跟着 webviewRoot 字段指定的目录，以及 webview 站点文件的路径。

bind:message 事件：webview 站点与小程序逻辑层通信bind:load 事件：webview 站点加载成功bind:error 事件：webview 站点加载失败

 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。  

3. webview 站点与小程序逻辑层通信