--- title: webview 站点 summary: "介绍 webview 站点功能，支持随小程序发布的离线静态文件站点及与逻辑层的双向通信。" questions: - 什么是 webview 站点，它有什么特性？ - 如何在 global.config.ts 中声明 webview 站点文件目录？ - webview 站点的 URL 协议格式是什么？ - webview 站点与小程序逻辑层如何进行通信？ - webview 站点支持哪些文件类型？ - 使用 webview 站点需要满足哪些版本要求？ - 如何在 webview 站点中发送消息到小程序逻辑层？ - 小程序页面如何接收来自 webview 站点的消息？ - webview 站点文件目录中的文件有哪些使用限制？ - 如何使用 WebView 组件加载 webview 站点？ --- # webview 站点 是随着小程序一同发布的静态文件站点，减轻开发者部署静态 html 文件负担，支持离线模式的技术。开发者可以在小程序中使用 WebView 组件加载 webview 站点，实现小程序与 webview 站点的无缝衔接。 ## webview 站点的特性 - 支持离线模式，提高访问速度 - 支持与小程序逻辑层通信 ## webview 站点的使用 ### 1. 声明 webview 站点文件目录 通过在 `src/global.config.ts` 的 `tuya` 配置中声明 `webviewRoot` 字段，指定 webview 站点文件目录，如下： ```ts // 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 站点文件。 目录结构如下： ```bash ├── src │ ├── global.config.ts │ └── pages │ └── index │ └── index.tsx └── my-webview ├── index.html └── index.js ``` > 注意：`webviewRoot` 字段只能声明一次，使用相对路径，不支持绝对路径。注意目录的关系。 ### 2. 使用 WebView 组件加载 webview 站点 站点协议为 `webview://`，在 Ray 页面中使用 [WebView](/cn/miniapp/develop/ray/component/open/web-view) 组件： ```tsx | pure // src/pages/index/index.tsx import React, { useRef } from 'react'; import { WebView } from '@ray-js/ray'; export default function IndexPage() { return ( { 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](https://www.npmjs.com/package/@tuya-miniapp/jssdk) 实现。 ```html webview 站点 ``` ```js | pure // 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 站点发送消息： ```tsx | pure // 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 ( { 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 语法，否则可能在移动端浏览器上出现兼容性问题；