Caution

目前只有 Rust 支持将 Slint 与 WebAssembly 结合使用。

Slint 应用程序可以运行在桌面、嵌入式和移动平台上。 使用 Rust 编写的 Slint 应用程序也可以交叉编译为 WebAssembly (Wasm) 并在 Web 浏览器中运行。

Note

为 Wasm 交叉编译的 Slint 使用 Winit 后端 与 FemtoVG 渲染器。

Slint 使用 WebGL 将你的 UI 渲染到 HTML <canvas> 元素中，而不使用 DOM 或 CSS。 这使得 UI 在各平台上具有一致的外观，但也会带来一些限制：

• Slint 直接渲染文本，无法利用浏览器的文本渲染能力。
• 辅助功能（例如屏幕阅读器）不可用。
• 该 UI 的行为与典型的 Web 应用程序不同，因为它不使用标准的 HTML 元素。

由于这些取舍，目前不建议在浏览器中运行 Slint 来构建通用的 Web 应用程序。 它最适合用于以下场景：

• 演示和示例，无需安装即可直接在浏览器中运行。
• Web 不是主要平台，但仍需要一致 UI 的应用程序。
• 与 Web 集成相比，原生风格的渲染更为重要的工具或仪表板。

为 Wasm 构建

有关逐步操作指南，请查看 快速入门 的最后一章。

以下是主要步骤的摘要：

在你的 Cargo.toml 中，将 crate 类型设置为 "cdylib"，并添加 wasm-bindgen 作为 “wasm” 目标的依赖项：

[lib]#...crate-type = ["cdylib"]
[target.'cfg(target_family = "wasm")'.dependencies]wasm-bindgen = { version = "0.2" }

使用 wasm-bindgen(start) 属性来标记应用程序的入口点。 UI 的创建和运行方式与通常一样：

#[cfg(target_family = "wasm")]use wasm_bindgen::prelude::*;
slint::include_modules!(); // or slint!(...)
#[cfg_attr(target_family = "wasm", wasm_bindgen(start))]pub fn main() {    // Usual application code
    let main_window = MainWindow::new().unwrap();    main_window.run().unwrap();}

使用 wasm-pack 构建应用程序。

Terminal window

wasm-pack build --release --target web

这会生成一个 pkg/ 目录，其中包含 .wasm 和 .js 文件，以及一个以你的包名命名的 JavaScript 文件。

在你的 HTML 文件中导入 wasm 二进制文件。 Slint 期望一个 id = "canvas" 的 <canvas> HTML 元素。

<canvas id="canvas"></canvas><script type="module">  import init from "./pkg/YOUR_APPLICATION.js";  init();</script>

将 YOUR_APPLICATION 替换为你 crate 的名称。

Note

许多 Web 浏览器仅在受信上下文中加载 .wasm 文件。如果在开发过程中你发现浏览器报出权限错误，那么可能需要通过 Web 服务器来提供文件，而不是直接通过文件系统。