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

IoT砖家涂拉拉

于 2024-08-29 00:15:00 发布

阅读量858

点赞数 19

文章标签：小程序 API SDK webview 站点 ray App

本文链接：https://blog.csdn.net/Ms_Smart/article/details/141597151

版权

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 小程序开发。

IoT砖家涂拉拉

关注

19
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
小程序开发指南 —— webview 站点使用指南

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

扫一扫