webview 站点
是随着小程序一同发布的静态文件站点，减轻开发者部署静态 html 文件负担，支持离线模式的技术。开发者可以在小程序中使用 webview 组件加载 webview 站点，实现小程序与 webview 站点的无缝衔接。
webview 站点的特性
webview 站点的使用
1. 声明 webview 站点文件目录
// app.json
{
"pages": [
"pages/index/index"
],
"webviewRoot": "my-webview"
}
├── app.json
└── pages
├── index
│ ├── index.js
│ ├── index.json
│ ├── index.tyml
│ └── index.tyss
└── my-webview
├── index.html
└── index.js
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" />
bind:message 事件：webview 站点与小程序逻辑层通信bind:load 事件：webview 站点加载成功bind:error 事件：webview 站点加载失败
👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。
3. webview 站点与小程序逻辑层通信
webview 站点与小程序逻辑层通信，通过 @tuya-miniapp/jssdk 实现。
<!-- my-webview/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webview 站点</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
// my-webview/index.js
// 发送消息到逻辑层
window.ty.miniProgram.postMessage({
data: {
msg: '发到逻辑层 -> ' + Date.now()
}
})
// 接受来自逻辑层的消息
window.ty.miniProgram.onMessage(function(event){
const messageData = event.data;
// messageData = {msg: '发到 h5 里 -> 13991818111'}
})
// pages/index/index.js
Page({
onReady() {
if (ty.createWebviewContext) {
this.webviewContext = ty.createWebviewContext('yourId');
}
},
// 接受来自 webview 站点的消息
message(event) {
const messageData = event.detail
// messageData = { msg: '发到逻辑层 -> 131819819'}
},
// 发送消息到 webview 站点
sendMessage() {
this.webviewContext.postMessage({
data: {
msg: '发到 h5 里 -> ' + Date.now(),
},
});
}
})
webview 站点文件类型
支持的文件后缀： .jpg .jpeg .png .gif .bmp .ico .tiff .svg .ttf .woff .woff2 .json .html .htm .js .css .mp3 .mp4
虽然 webview 站点支持的文件类型较多，并不意味着所有文件都可以放在 webview 站点中，开发者需要根据实际情况，选择合适的文件类型，以及文件大小。过大的文件会导致小程序加载速度变慢，影响用户体验。或无法上传到小程序平台。
使用条件
- Tuya MiniApp Tools
>= 0.5.10 - 基础库版本
>= 2.14.2 - 容器版本
>= 3.12.0 - @tuya-miniapp/jssdk
>= 0.1.2
注意事项
👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。
