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

用 Rust 构建 Web 应用（wasm-bindgen WebAssembly 绑定入门教程）

主机测评网
Rust
2025-12-06
961

随着 Web 技术的发展，Rust WebAssembly 成为了高性能前端开发的新宠。而 wasm-bindgen 正是连接 Rust 与 JavaScript 的桥梁，它允许你轻松地在 Web 应用中调用 Rust 编写的函数。本教程将手把手教你如何使用 wasm-bindgen 创建一个简单的 WebAssembly 模块，并在网页中调用它。

什么是 wasm-bindgen？

wasm-bindgen 是一个 Rust 工具库，用于生成 WebAssembly（Wasm）与 JavaScript 之间的绑定代码。它能自动处理类型转换、内存管理等复杂问题，让你像写普通 Rust 函数一样开发 Web 功能。

用 Rust 构建 Web 应用（wasm-bindgen WebAssembly 绑定入门教程） wasm-bindgen教程 Rust前端开发 WebAssembly绑定第1张

准备工作

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

Rust（通过 rustup 安装）
wasm-pack：运行 cargo install wasm-pack
Node.js（用于本地测试）

创建第一个 wasm-bindgen 项目

我们来创建一个简单的“问候”函数，从 Rust 返回一条消息到网页。

1. 初始化项目

cargo new --lib hello-wasmcd hello-wasm

2. 修改 Cargo.toml

在 Cargo.toml 中添加依赖：

[package]name = "hello-wasm"version = "0.1.0"edition = "2021"[lib]crate-type = ["cdylib"][dependencies]wasm-bindgen = "0.2"

3. 编写 Rust 代码

编辑 src/lib.rs 文件：

use wasm_bindgen::prelude::*;#[wasm_bindgen]pub fn greet(name: &str) -> String {    format!("Hello, {}! Welcome to Rust WebAssembly!", name)}

注意：#[wasm_bindgen] 宏告诉编译器这个函数需要暴露给 JavaScript 使用。

构建并生成 Web 可用的包

在项目根目录运行：

wasm-pack build --target web

这会生成 pkg/ 目录，里面包含 .js 和 .wasm 文件，可直接在浏览器中使用。

在网页中使用你的 Rust 函数

创建一个 index.html 文件：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Rust WebAssembly 示例</title></head><body>  <script type="module">    import init, { greet } from './pkg/hello_wasm.js';    async function run() {      await init();      const message = greet("小明");      document.body.innerHTML = `<h2>${message}</h2>`;    }    run();  </script></body></html>

启动一个本地服务器（例如使用 npx serve 或 Python 的 http.server），打开网页即可看到效果！