当前位置：首页 > Rust > 正文

用 Rust 构建 Web 应用（stdweb 入门指南）

主机测评网
Rust
2025-12-02
356

你是否想过用 Rust 这门系统级语言来开发网页？听起来有点不可思议，但借助 stdweb 和 WebAssembly，这一切都变得可能！本教程将带你从零开始，了解如何使用 Rust 的 stdweb 库与浏览器交互，即使你是编程新手也能轻松上手。

用 Rust 构建 Web 应用（stdweb 入门指南） stdweb WebAssembly 开发前端开发浏览器 API 第1张

什么是 stdweb？

stdweb 是一个 Rust crate（库），它允许你在 Rust 代码中直接调用浏览器的 JavaScript API。通过将 Rust 编译为 WebAssembly（Wasm），你可以在浏览器中运行高性能的 Rust 代码，并使用 stdweb 与 DOM、事件、定时器等 Web 标准进行交互。

虽然现在官方更推荐使用 wasm-bindgen 和 web-sys，但 stdweb 作为早期探索者，语法简洁直观，非常适合学习 Rust 与 Web 集成的基本原理。

准备工作

在开始之前，请确保你已安装以下工具：

Rust 工具链（包括 cargo）
wasm-pack 或 cargo-web（stdweb 推荐使用后者）

安装 cargo-web 很简单，只需在终端运行：

cargo install cargo-web

创建第一个 stdweb 项目

打开终端，执行以下命令创建新项目：

cargo new --bin hello-stdwebcd hello-stdweb

然后编辑 Cargo.toml 文件，添加 stdweb 依赖：

[dependencies]stdweb = "0.4"[dependencies.web-sys]version = "0.3"optional = true[[bin]]name = "hello-stdweb"path = "src/main.rs"

注意：虽然我们主要使用 stdweb，但有时也会结合其他 Web API 库。

编写 Rust 代码操作网页

现在，打开 src/main.rs，输入以下代码：

#![recursion_limit="128"]use stdweb::web::document;use stdweb::web::html_element::ButtonElement;use stdweb::web::event::ClickEvent;use stdweb::web::{IEventTarget, INode, IParentNode};use stdweb::unstable::TryInto;fn main() {    stdweb::initialize();    // 获取页面中的 body 元素    let body = document().body().expect("页面必须有 body");    // 创建一个按钮    let button: ButtonElement = document()        .create_element("button")        .unwrap()        .try_into()        .unwrap();    button.set_text_content("点我！");    // 为按钮绑定点击事件    button.add_event_listener(|_: ClickEvent| {        alert!("你好，Rust + WebAssembly！");    });    // 将按钮添加到页面    body.append_child(&button);    stdweb::finish();}

这段代码做了三件事：