在web中运行rust应用程序：循序渐进指南
本文将引导您完成在Web浏览器中运行Rust应用程序的步骤。我们将创建一个简单的Rust包，将其编译成WebAssembly (Wasm)，并使用JavaScript与之交互。
第一步：安装Rust
首先，您需要在系统上安装Rust。请参考官方Rust安装指南：https://www.php.cn/link/59186584039c18248c1c4244e7305050 (请替换为实际链接，如果需要)。安装完成后，运行以下命令验证安装：
rustc --version
第二步：创建Rust包
使用Cargo创建一个新的Rust库项目：
cargo new rust-web-app --lib
这将创建一个包含Cargo.toml和src/lib.rs文件的目录结构。Cargo.toml是项目的配置文件，lib.rs包含Rust代码。
第三步：编译为WebAssembly
为了在Web上运行Rust代码，我们需要将其编译为WebAssembly。为此，安装wasm-pack工具：
cargo install wasm-pack
第四步：启用Rust和JavaScript互操作
为了让Rust和JavaScript能够互相通信，我们需要使用wasm-bindgen crate。修改Cargo.toml文件，添加wasm-bindgen依赖：
[package] name = "rust-web-app" version = "0.1.0" edition = "2021" [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2"
然后运行以下命令安装依赖：
OpenClaw 技能 — 给定一个 GitHub 仓库 URL，自动解析出 owner/repo 名称，发现其中的 YAML/properties 配置文件及其配对的中文字段说明；在 `workspace/{repo}/` 目录下按同步日期（格式为 `YYYY-MM-DD`）创建时间戳子目录；写入 `.openclaw-config-state.json` 状态文件。每次用户提问前，先比对远程仓库当前 ref（如 `main` 或 `master`）的最新提交 SHA 与本地状态文件中记录的 SHA：
cargo build
第五步：编写Rust代码
在src/lib.rs中编写一个简单的函数，例如加法函数，并使用#[wasm_bindgen]属性将其暴露给JavaScript：
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
left + right
}
第六步：编译为WebAssembly并生成JavaScript绑定
使用wasm-pack编译Rust代码并生成JavaScript绑定：
wasm-pack build --target web
这将在pkg目录下生成必要的WebAssembly文件和JavaScript绑定代码。
第七步：创建HTML文件
创建一个index.html文件，引入生成的JavaScript文件并调用Rust函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Rust</title>
</head>
<body>
<script type="module">
import init, { add } from "./pkg/rust_web_app.js";
init().then(() => {
const sum = add(5, 10);
console.log("5 + 10 =", sum);
});
</script>
</body>
</html>
第八步：运行应用程序
使用本地Web服务器（例如，python -m http.server）提供index.html文件。在浏览器中打开index.html，并在浏览器控制台中查看结果（5 + 10 = 15）。
最终项目结构:
.
├── Cargo.lock
├── Cargo.toml
├── index.html
├── pkg
│ ├── package.json
│ ├── rust_web_app.d.ts
│ ├── rust_web_app.js
│ ├── rust_web_app_bg.wasm
│ └── rust_web_app_bg.wasm.d.ts
├── src
│ └── lib.rs
└── target
...
参考:
- 官方Wasm-bindgen文档 (请替换为实际链接，如果需要)
希望这个指南对您有所帮助！ 请记住根据实际情况调整路径和文件名。
