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

Rust 与 WebAssembly 的桥梁（使用 web-sys 绑定浏览器 Web API）

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

如果你刚接触 Rust 和 Web 开发，可能会好奇：Rust 是一门系统级语言，怎么能和网页交互呢？答案就是 WebAssembly（Wasm） + web-sys！

在这篇教程中，我们将一步步带你了解如何使用 Rust 的 web-sys crate 来调用浏览器中的 Web API，比如操作 DOM、监听事件、使用控制台等。即使你是编程小白，也能轻松上手！

Rust 与 WebAssembly 的桥梁（使用 web-sys 绑定浏览器 Web API） API 第1张

什么是 web-sys？

web-sys 是 Rust 官方团队维护的一个 crate（库），它为所有 Web API 提供了安全、类型化的绑定。这意味着你可以在 Rust 中像使用原生函数一样调用 console.log()、document.getElementById() 等 JavaScript API，而无需手动写胶水代码。

它是构建在 wasm-bindgen 之上的，后者负责处理 Rust 与 JavaScript 之间的底层通信。

准备工作

首先，确保你已安装以下工具：

Rust 工具链（推荐通过 rustup 安装）
wasm-pack：用于编译和打包 WebAssembly 项目

安装 wasm-pack（在终端运行）：

cargo install wasm-pack

创建一个新项目

打开终端，运行以下命令创建一个新的 Rust 库项目：

cargo new --lib rust-web-sys-democd rust-web-sys-demo

配置 Cargo.toml

编辑 Cargo.toml 文件，添加必要的依赖：

[package]name = "rust-web-sys-demo"version = "0.1.0"edition = "2021"[lib]crate-type = ["cdylib"][dependencies]wasm-bindgen = "0.2"web-sys = { version = "0.3", features = [  "console",  "Document",  "Window",  "Element",  "HtmlElement",] }

注意：我们启用了 web-sys 的特定功能（features），比如 console 和 Document。这是为了减小最终包的体积——只包含你需要的 Web API。

编写 Rust 代码

将 src/lib.rs 替换为以下内容：

use wasm_bindgen::prelude::*;// 导入我们需要的 Web APIuse web_sys::{window, console, Document, Element};#[wasm_bindgen(start)]pub fn main() -> Result<(), JsValue> {    // 获取浏览器窗口对象    let window = window().unwrap();    let document: Document = window.document().unwrap();    // 创建一个 <p> 元素    let p: Element = document.create_element("p")?.into();    p.set_text_content(Some("Hello from Rust via web-sys! 🦀"));    // 将元素添加到页面 body 中    let body = document.body().unwrap();    body.append_child(&p)?;    // 在浏览器控制台打印日志    console::log_1(&"Rust 代码已成功运行！".into());    Ok(())}

这段代码做了三件事：

获取浏览器的 window 和 document 对象
创建一个段落元素并设置文本
将该元素插入页面，并在控制台输出日志

构建并测试

在项目根目录运行：

wasm-pack build --target web

构建完成后，会生成一个 pkg/ 目录。接下来，我们创建一个简单的 HTML 页面来加载这个模块。

在项目根目录新建 index.html：

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>Rust + web-sys Demo</title></head><body>  <script type="module">    import init from './pkg/rust_web_sys_demo.js';    init();  </script></body></html>

然后用任意本地服务器打开（例如使用 Python）：