在本教程中，我们将学习如何在 Web 浏览器中运行 Rust 应用程序。我们将创建一个简单的 Rust 包，将其编译为 WebAssembly (WASM)，并将其集成到一个 HTML 页面中。

1. 安装 Rust

首先，你需要安装 Rust。请参考 Rust 官方安装指南：Rust 安装指南。安装完成后，运行以下命令验证安装是否成功：

rustc --version

2. 创建 Rust 包

接下来，创建一个新的 Rust 包：

cargo new rust-101 --lib

这将生成以下文件夹结构：

├── Cargo.toml
└── src
    └── lib.rs

• Cargo.toml：项目的配置文件，类似于 JavaScript 中的 package.json。
• lib.rs：包含 Rust 代码的主要库文件。

打开 lib.rs 文件。默认情况下，它包含一个示例 add 函数。我们的目标是从 Web 应用程序调用此函数。

3. 将 Rust 编译为 WebAssembly

要在 Web 上运行 Rust 代码，你需要将其编译为 WebAssembly (WASM)。为此，安装 wasm-pack 工具：

cargo install wasm-pack

4. 建立 Rust 和 JavaScript 之间的通信

为了连接 Rust 和 JavaScript，我们将使用 wasm-bindgen crate。更新 Cargo.toml 文件如下：

[package]
name = "rust-101"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"

这里：

• crate-type = ["cdylib"]：配置包以生成与 WebAssembly 兼容的动态库。
• wasm-bindgen：启用 Rust 和 JavaScript 之间的通信。

安装依赖项：

cargo build

5. 更新 Rust 代码

编辑 src/lib.rs 文件，使 add 函数可从 JavaScript 访问：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
    left   right
}

• #[wasm_bindgen]：将 add 函数暴露给 JavaScript。

运行以下命令将 Rust 包编译为 WebAssembly：

wasm-pack build --target web

此命令将：

• 将 Rust 代码编译为 WebAssembly。
• 生成用于处理 WebAssembly 文件的 JavaScript 绑定。
• 创建一个包含生成文件的 pkg/ 目录。

6. 在网页中使用包

在项目根目录中创建一个 index.html 文件，内容如下：

7. 最终项目结构

完成以上步骤后，你的项目结构应如下所示：

.
├── Cargo.lock
├── Cargo.toml
├── index.html
├── pkg
│   ├── package.json
│   ├── rust_101.d.ts
│   ├── rust_101.js
│   ├── rust_101_bg.wasm
│   └── rust_101_bg.wasm.d.ts
└── src
    └── lib.rs

8. 启动 Web 页面

要运行网页，你需要使用本地 Web 服务器来提供服务。可以使用任何你喜欢的Web服务器，例如Live Server扩展(VS Code)。

在浏览器控制台中（Ctrl Shift J 或 Cmd Option J），你应该看到：

5   10 = 15

就是这样！希望本教程对您有所帮助。请随时分享您的反馈或问题！

参考：

• 从 Rust 编译到 WebAssembly

请注意，我替换了原文中的一些措辞，并对步骤进行了更清晰的组织，但保持了原文的整体意思和图片位置。 我没有添加任何新的内容或改变原文的重点。 请根据实际情况替换“[此处应插入Rust安装指南链接]”和“[此处应插入相关文档链接]”为正确的链接。