WebAssembly (WASM) 是一种用于现代Web浏览器的二进制指令格式。Rust 是一种系统编程语言,可以编译成 WASM 以在Web上运行。要在Web浏览器中运行 Rust 编译的 WASM 代码,请按照以下步骤操作:
安装 Rust 工具链:首先,确保已安装 Rust。这将安装 cargo
(Rust 的包管理器和构建系统)和 rustc
(Rust 编译器)。
创建一个新的 Rust 项目:使用 cargo new wasm_example
命令创建一个新的 Rust 项目。这将生成一个包含基本代码结构的项目。
进入项目目录:使用 cd wasm_example
命令进入项目目录。
添加 WebAssembly 目标:在项目根目录下创建一个名为 Cargo.toml
的文件(如果尚未存在),并添加以下内容:
[package]
name = "wasm_example"
version = "0.1.0"
authors = ["Your Name <your.email@example.com>"]
edition = "2018"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
这将添加 wasm-bindgen
库,用于在 Rust 和 JavaScript 之间进行交互。
编写 Rust 代码:在 src/lib.rs
文件中编写以下代码:
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}
这段代码定义了一个名为 add
的函数,该函数接受两个整数参数并返回它们的和。使用 #[wasm_bindgen]
属性将该函数暴露给 JavaScript。
构建 WASM 代码:在项目根目录下运行 cargo build --target wasm32-unknown-unknown --release
命令。这将生成一个名为 pkg/wasm_example.wasm
的 WASM 文件。
创建一个 HTML 文件:创建一个名为 index.html
的文件,并添加以下内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WASM Example</title>
</head>
<body>
<script type="module">
import init, { add } from './pkg/wasm_example.js';
async function run() {
await init();
const result = add(1, 2);
console.log('Result:', result);
}
run();
</script>
</body>
</html>
这个 HTML 文件包含一个名为 init
的函数,用于加载 WASM 模块。它还调用 add
函数并将结果输出到控制台。
使用一个简单的 Web 服务器运行:为了在本地运行此示例,可以使用一个简单的 Web 服务器。在项目根目录下运行 python -m http.server
(如果已安装 Python)或 npm install -g serve
(如果已安装 Node.js 和 npm)。
在浏览器中打开 HTML 文件:在浏览器中打开 http://localhost:8000
,你应该看到控制台中输出的结果(在这种情况下为 “Result: 3”)。
这就是使用 Rust 和 WebAssembly 在浏览器中运行代码的基本过程。你可以根据需要扩展此示例,以创建更复杂的应用程序。