Skip to content
Slint Docs

Web

Slint 应用程序可在桌面、嵌入式和移动平台上运行。 用 Rust 或 C++ 编写的 Slint 应用程序也可以交叉编译到 WebAssembly（Wasm）并在 Web 浏览器中运行。

Slint 使用 WebGL 把你的 UI 渲染到一个 HTML <canvas> 元素中，而不使用 DOM 或 CSS。 这带来了跨平台一致的外观，但也引入了一些限制：

  • Slint 直接渲染文本，而不是受益于浏览器的文本渲染。
  • 无障碍功能（如屏幕阅读器）不可用。
  • UI 的行为不像典型的 Web 应用程序，因为它不使用标准 HTML 元素。

由于这些取舍，目前不推荐用浏览器中运行的 Slint 来构建通用 Web 应用程序。 相反，它最适合用于：

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

为 Wasm 构建

Section titled “为 Wasm 构建”

如需分步讲解，请查看 quickstart 的最后一章。

下面是主要步骤的摘要：

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

[lib]
#...
crate-type = ["cdylib"]


[target.'cfg(target_family = "wasm")'.dependencies]
wasm-bindgen = { version = "0.2" }
toml

使用 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();
}
rust

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

Terminal window
wasm-pack build --release --target web
bash

这会创建一个 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>
html

把 YOUR_APPLICATION 替换为你的 crate 名称。

© 2026 SixtyFPS GmbH