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 站点加载失败
👉 立即免费领取开发资源，体验涂鸦 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: '发到逻辑层 -> 13891819819'}
},
// 发送消息到 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
注意事项
- webview 站点文件目录中的文件，不支持使用小程序的组件，如
view、scroll-view等，只支持静态 html 标签； - 开发者需保障 webview 站点文件的合法性，不得包含违法、色情、暴力等内容，否则将会被小程序平台封禁；
- js 脚本需保障安全性，不得包含恶意代码，否则将会被小程序平台封禁；
- js 脚本需保障兼容性，例如: 使用 es5 语法，不使用 es6 语法。否则可能移动端浏览器上出现兼容性问题；
👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。
本文转载自: https://blog.csdn.net/Ms_Smart/article/details/141597151
版权归原作者 IoT砖家涂拉拉 所有， 如有侵权，请联系我们删除。
版权归原作者 IoT砖家涂拉拉 所有， 如有侵权，请联系我们删除。