在本教程中，我们将学习如何在 Web 浏览器中运行 Rust 应用程序。我们将创建一个简单的 Rust 包，将其编译为 WebAssembly (WASM)，并将其集成到一个 HTML 页面中。
1. 安装 Rust
首先，你需要安装 Rust。请参考 Rust 官方安装指南：Rust 安装指南。安装完成后，运行以下命令验证安装是否成功：
<code class="language-bash">rustc --version</code>
2. 创建 Rust 包
接下来，创建一个新的 Rust 包：
<code class="language-bash">cargo new rust-101 --lib</code>
这将生成以下文件夹结构：
<code>├── Cargo.toml
└── src
└── lib.rs</code>Cargo.toml：项目的配置文件，类似于 JavaScript 中的 package.json。lib.rs：包含 Rust 代码的主要库文件。打开 lib.rs 文件。默认情况下，它包含一个示例 add 函数。我们的目标是从 Web 应用程序调用此函数。
3. 将 Rust 编译为 WebAssembly
要在 Web 上运行 Rust 代码，你需要将其编译为 WebAssembly (WASM)。为此，安装 wasm-pack 工具：
<code class="language-bash">cargo install wasm-pack</code>
4. 建立 Rust 和 JavaScript 之间的通信
为了连接 Rust 和 JavaScript，我们将使用 wasm-bindgen crate。更新 Cargo.toml 文件如下：
<code class="language-toml">[package] name = "rust-101" version = "0.1.0" edition = "2021" [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2"</code>
这里：
crate-type = ["cdylib"]：配置包以生成与 WebAssembly 兼容的动态库。wasm-bindgen：启用 Rust 和 JavaScript 之间的通信。安装依赖项：
<code class="language-bash">cargo build</code>
5. 更新 Rust 代码
编辑 src/lib.rs 文件，使 add 函数可从 JavaScript 访问：
<code class="language-rust">use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
left + right
}</code>#[wasm_bindgen]：将 add 函数暴露给 JavaScript。运行以下命令将 Rust 包编译为 WebAssembly：
<code class="language-bash">wasm-pack build --target web</code>
此命令将：
pkg/ 目录。6. 在网页中使用包
在项目根目录中创建一个 index.html 文件，内容如下：
<code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Rust</title>
</head>
<body>
<script type="module">
import init, { add } from "./pkg/rust_101.js";
init().then(() => {
const sum = add(5, 10);
console.log("5 + 10 =", sum);
});
</script>
</body>
</html></code>7. 最终项目结构
完成以上步骤后，你的项目结构应如下所示：
<code>.
├── 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</code>8. 启动 Web 页面
要运行网页，你需要使用本地 Web 服务器来提供服务。可以使用任何你喜欢的Web服务器，例如Live Server扩展(VS Code)。
在浏览器控制台中（Ctrl Shift J 或 Cmd Option J），你应该看到：
<code class="language-bash">rustc --version</code>
就是这样！希望本教程对您有所帮助。请随时分享您的反馈或问题！
参考：
请注意，我替换了原文中的一些措辞，并对步骤进行了更清晰的组织，但保持了原文的整体意思和图片位置。 我没有添加任何新的内容或改变原文的重点。 请根据实际情况替换“[https://www.php.cn/link/d185c5ed37536ac0063f735f7a15dd24]”和“[https://www.php.cn/link/2677c94cc946bd788a3828099d6bcd49]”为正确的链接。
以上是如何在 Web 中运行 Rust 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！
