Learn Rust Coding · 课时

Rust 与 WebAssembly（WASM）

Q: 「Rust 与 WebAssembly（WASM）」这节课中我会学到什么？

将 Rust 代码编译为 WebAssembly，使高性能模块能够在网页浏览器和其他 WASM 运行时中运行。 你通过在浏览器中直接运行的动手代码来练习 Learn Rust Coding，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将 Rust 代码编译为 WebAssembly，使高性能模块能够在网页浏览器和其他 WASM 运行时中运行。

第 2 / 3 课11 个步骤

Rust 与 WebAssembly（WASM） 是 CoddyKit 上的免费 Learn Rust Coding 课时。这是第 2 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Learn Rust Coding 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Learn Rust Coding 课程共包含 3 节课。

什么是 WebAssembly（WASM）

WebAssembly（或 WASM）是一种面向基于栈的虚拟机的二进制指令格式。它被设计为一种可移植的编译目标，适用于 Rust、C/C++ 和 Go 等高级语言。

您可以把它理解为一种低级的、类似汇编的语言，能够在网页浏览器和其他环境中高效运行。它可以让性能关键型代码以接近原生的速度运行。

Rust 用于 WASM 的优势

凭借独特的优势，Rust 是开发 WebAssembly 的绝佳选择：

性能：Rust 以速度快而闻名，性能接近 C/C++。
内存安全：Rust 的所有权系统无需垃圾回收器，就能避免常见错误。
二进制文件小：Rust 的最小化运行时可以生成紧凑的 WASM 模块。
工具支持：拥有 wasm-pack 和 wasm-bindgen 等工具的出色支持。

设置 WASM 工具

要将 Rust 编译为 WebAssembly，您主要会使用 wasm-pack。它是一个命令行工具，可以处理整个构建过程。

您还会使用 wasm-bindgen，这是一个 Rust crate 和 CLI 工具，用于促进 WASM 模块与 JavaScript 之间的高级交互。

要安装 wasm-pack，请打开终端并运行：

cargo install wasm-pack

您的第一个 WASM 项目

让我们创建一个专为 WebAssembly 定制的新 Rust 项目。我们将使用带有特定模板的 cargo generate：

cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template

请按照提示为项目命名。此操作会创建一个可用于 WASM 代码的 lib.rs 文件，以及一个用于简单网页界面的 www 目录。

供 JavaScript 使用的 Rust 函数

要让 JavaScript 调用 Rust 函数，我们会使用 wasm-bindgen crate 中的 #[wasm_bindgen] 属性。

此属性会指示 wasm-bindgen 生成必要的连接代码，以便 JavaScript 与您的 Rust 函数交互。

use wasm_bindgen::prelude::*;

// This attribute makes the `greet` function available to JavaScript.
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// In a WASM library, `main` is not used. This code is compiled to a .wasm module.

将 WASM 与 JavaScript 集成

编写 Rust 代码后，您可以使用 wasm-pack build 将其构建为 WASM 模块。此命令会创建一个 pkg 目录，其中包含您的 .wasm 文件和 JS 连接代码。

然后，您可以在 JavaScript 中轻松导入并使用导出的 Rust 函数：

// www/index.js (simplified)
import { greet } from "../pkg/your_project_name"; // Adjust path

// Call the Rust function
const message = greet("CoddyKit Learner");
console.log(message); // Outputs: "Hello, CoddyKit Learner!"

// You'd typically connect this to HTML elements.

Rust 调用 JavaScript

Rust 也可以调用 JavaScript 函数。您可以在 extern "C" 代码块中声明这些函数，并使用 #[wasm_bindgen] 将它们映射到 JS 全局对象或函数。

js_namespace 参数让您可以指定在 JavaScript 环境中的何处查找函数，例如 console 对象。

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    // Import JS console.log as a Rust function named 'log'
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    // You can import other JS functions too
    #[wasm_bindgen(js_name = alert)]
    fn js_alert(s: &str);
}

#[wasm_bindgen]
pub fn log_and_alert_from_rust(message: &str) {
    log(&format!("Rust log: {}", message));
    js_alert(&format!("Rust alert: {}", message));
}

在 Rust 和 JS 之间传递字符串

wasm-bindgen 可以智能处理数字和布尔值等常见数据类型。对于字符串，它使用 UTF-8 编码。

当您从 Rust 传递 &str 或 String 时，wasm-bindgen 会将其转换为 JavaScript String，反之亦然。这种抽象让互操作变得顺畅。

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn uppercase_and_reverse(s: String) -> String {
    s.to_uppercase().chars().rev().collect()
}

// This function takes a String, processes it, and returns a new String.
// wasm-bindgen handles the conversion to/from JS strings.

浏览器之外的 WASM

虽然 WebAssembly 经常与网页浏览器联系在一起，但它并不局限于浏览器！许多环境都存在 WASM 运行时，从而带来了新的可能性：

无服务器函数：部署快速且相互隔离的函数。
区块链：执行智能合约。
插件/扩展：安全地扩展应用程序。
桌面应用：嵌入高性能模块。

这让 Rust 的应用范围远远超出了传统的系统编程。

WebAssembly 核心概念

让我们检查一下您对 Rust 和 WebAssembly 的理解。

在交互式课程中回答

回顾：从 Rust 到 WASM

您已经学会了如何将 Rust 的性能和安全性带到 WebAssembly 中！

WASM 为编译后的代码提供快速且可移植的运行时。
凭借性能出色、二进制文件小和安全性高等特点，Rust 非常适合 WASM。
wasm-pack 和 wasm-bindgen 等工具简化了开发过程。
您可以轻松将 Rust 函数导出到 JavaScript，也可以将 JavaScript 函数导入 Rust。
WASM 的应用范围远不止网页浏览器。

继续探索，使用 Rust 构建强大且高性能的网页和非网页应用程序！

免费开始

用 AI 导师学习 Rust — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 39
课程: 144

免费开始学习查看完整课程

常见问题解答

「Rust 与 WebAssembly（WASM）」课时是免费的吗？

是的 — 「Rust 与 WebAssembly（WASM）」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Learn Rust Coding 课程的其余内容，请升级到 CoddyKit PRO。 Learn Rust Coding 课程共包含 3 节课。

「Rust 与 WebAssembly（WASM）」这节课中我会学到什么？

将 Rust 代码编译为 WebAssembly，使高性能模块能够在网页浏览器和其他 WASM 运行时中运行。你通过在浏览器中直接运行的动手代码来练习 Learn Rust Coding，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Learn Rust Coding 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Learn Rust Coding 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 3 节。

「Rust 与 WebAssembly（WASM）」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Learn Rust Coding 课中编写并运行代码吗？

能。每节 Learn Rust Coding 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Learn Rust Coding