#webview 站点

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

#webview 站点的特性

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

#webview 站点的使用

#1. 声明 webview 站点文件目录

通过在 src/global.config.ts 的 tuya 配置中声明 webviewRoot 字段，指定 webview 站点文件目录，如下：

// src/global.config.ts
import { GlobalConfig } from '@ray-js/types';

export const tuya = {
  webviewRoot: 'my-webview',
};

const globalConfig: GlobalConfig = {
  basename: '',
};

export default globalConfig;

则小程序会以 webviewRoot 字段指定的目录进行部署，加载 webview 站点文件。

目录结构如下：

├── src
│   ├── global.config.ts
│   └── pages
│       └── index
│           └── index.tsx
└── my-webview
    ├── index.html
    └── index.js

注意：webviewRoot 字段只能声明一次，使用相对路径，不支持绝对路径。注意目录的关系。

#2. 使用 WebView 组件加载 webview 站点

站点协议为 webview://，在 Ray 页面中使用 WebView 组件：

// src/pages/index/index.tsx
import React, { useRef } from 'react';
import { WebView } from '@ray-js/ray';

export default function IndexPage() {
  return (
    <WebView
      id="yourId"
      src="webview://my-webview/index.html"
      onMessage={(event) => {
        const messageData = event.detail;
        // messageData = { msg: '发到逻辑层 -> 13891819819' }
        console.log('收到 webview 消息:', messageData);
      }}
      onLoad={() => console.log('webview 加载成功')}
      onError={() => console.log('webview 加载失败')}
    />
  );
}

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

• onMessage：webview 站点与小程序逻辑层通信
• onLoad：webview 站点加载成功
• onError：webview 站点加载失败

#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' }
});

在 Ray 页面中通过 ty.createWebviewContext 向 webview 站点发送消息：

// src/pages/index/index.tsx
import React, { useEffect, useRef } from 'react';
import { createWebviewContext, WebView } from '@ray-js/ray';

export default function IndexPage() {
  const webviewContextRef = useRef(null);

  useEffect(() => {
    webviewContextRef.current = createWebviewContext('yourId');
  }, []);

  function sendMessage() {
    webviewContextRef.current?.postMessage({
      data: { msg: '发到 h5 里 -> ' + Date.now() },
    });
  }

  return (
    <WebView
      id="yourId"
      src="webview://my-webview/index.html"
      onMessage={(event) => {
        console.log('收到 webview 消息:', event.detail);
      }}
    />
  );
}

#webview 站点文件类型

支持的文件后缀： .jpg .jpeg .png .gif .bmp .ico .tiff .svg .ttf .woff .woff2 .json .html .htm .js .css .mp3 .mp4

虽然 webview 站点支持的文件类型较多，并不意味着所有文件都可以放在 webview 站点中，开发者需要根据实际情况，选择合适的文件类型，以及文件大小。过大的文件会导致小程序加载速度变慢，影响用户体验，或无法上传到小程序平台。

#使用条件

• Tuya MiniApp IDE >= 0.5.10
• 基础库版本 >= 2.14.2
• 容器版本 >= 3.12.0
• @tuya-miniapp/jssdk >= 0.1.2

#注意事项

1. webview 站点文件目录中的文件，不支持使用小程序的组件，如 View、ScrollView 等，只支持静态 html 标签；
2. 开发者需保障 webview 站点文件的合法性，不得包含违法、色情、暴力等内容，否则将会被小程序平台封禁；
3. js 脚本需保障安全性，不得包含恶意代码，否则将会被小程序平台封禁；
4. js 脚本需保障兼容性，例如：使用 es5 语法，不使用 es6 语法，否则可能在移动端浏览器上出现兼容性问题；