小程序开发指南 —— webview 站点利用指南

webview 站点

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

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

webview 站点的利用

1. 声明 webview 站点文件目次

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

1. // app.json
2. {
3.   "pages": [
4.     "pages/index/index"
5.   ],
6.   "webviewRoot": "my-webview"
7. }

复制代码

则小程序会以 webviewRoot 字段指定的目次进行摆设，加载 webview 站点文件。
目次结构如下：

1. ├── app.json
2. └── pages
3.     ├── index
4.     │   ├── index.js
5.     │   ├── index.json
6.     │   ├── index.tyml
7.     │   └── index.tyss
8.     └── my-webview
9.         ├── index.html
10.         └── index.js

复制代码

  注意：webviewRoot 字段只能在 app.json 中声明一次，且只能声明一次，利用相对路径，不支持绝对路径。注意目次的关系。
  
2. 利用 webview 组件加载 webview 站点

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

1. <!-- pages/index/index.tyml -->
2. <web-view id="yourId" src="webview://my-webview/index.html" bind:message="message" bind:load="load" bind:error="error" />

复制代码

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

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