十念 发表于 2024-10-23 06:04:57

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

webview 站点

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



[*]支持离线模式,提高访问速率
[*]支持与小程序逻辑层通信
webview 站点的利用

1. 声明 webview 站点文件目次

通过在 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" /> 其中 src 属性的值为 webview:// 开头,背面跟着 webviewRoot 字段指定的目次,以及 webview 站点文件的路径。


[*]bind:message 事件:webview 站点与小程序逻辑层通信
[*]bind:load 事件:webview 站点加载成功
[*]bind:error 事件:webview 站点加载失败
 
页: [1]
查看完整版本: 小程序开发指南 —— webview 站点利用指南