简介
WebAssembly (简称 Wasm) 是一种可以在现代网络浏览器中高效运行的低级编程语言。它提供了一种接近底层硬件的执行效率，并且能够被多种高级语言编译成这种格式。Rust 是一门系统编程语言，以其内存安全性和并发控制能力而闻名。由于 Rust 生成的二进制文件非常紧凑，以及其对底层硬件的精细控制能力，使得它成为编译成 WebAssembly 的理想选择。
安装必要的工具
在开始之前，请确保已经安装了以下工具：
Rust: 使用
rustup工具链管理器来安装 Rust。如果尚未安装，可以访问 Rust 官方网站 获取安装指南。wasm-pack: 这是一个用于将 Rust 代码打包并部署到 WebAssembly 的工具。使用以下命令安装：
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
Node.js 和 npm: 用于管理前端依赖和构建项目。访问 Node.js 官网 下载安装包。
创建一个新的 Rust 项目
首先，我们需要创建一个新的 Rust 项目。打开终端并运行以下命令：
cargo new hello-wasm --lib cd hello-wasm
这将创建一个名为 hello-wasm 的新项目，并且将其设置为库类型，因为我们将编译它为 WebAssembly。
修改 Cargo.toml 文件
接下来，我们需要修改项目的 Cargo.toml 文件，添加必要的依赖和配置信息，使其能够编译为 WebAssembly。
在 [dependencies] 部分添加 wasm-bindgen 依赖：
[dependencies] wasm-bindgen = "0.2"
在 [lib] 部分指定输出类型为 cdylib，这是为了告诉 Rust 我们希望生成动态链接库（Dynamic Link Library），这将是 WebAssembly 的形式：
[lib] crate-type = ["cdylib"]
编写 Rust 代码
接下来，在 src/lib.rs 中编写一些简单的 Rust 代码，这些代码将被编译为 WebAssembly。这里我们定义了一个函数 greet，它接受一个字符串参数并返回一个问候消息。
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}这个例子展示了如何使用 wasm_bindgen 来将 Rust 函数暴露给 JavaScript。通过 #[wasm_bindgen] 属性，我们可以轻松地将 Rust 函数转换为可以由 JavaScript 调用的形式。
编译 Rust 项目为 WebAssembly
一切准备就绪后，就可以开始编译 Rust 项目为 WebAssembly 了。回到终端，运行以下命令：
wasm-pack build --target web
此命令会将项目编译成 WebAssembly 格式，并将结果放在 pkg 目录下。
在 HTML 文件中加载 WebAssembly
现在，让我们创建一个简单的 HTML 文件来加载并使用刚才编译出来的 WebAssembly 模块。首先，在项目根目录下创建一个名为 index.html 的文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----------- ---- ------------
-------
------
-------- ---- ------------
------ ----------- -------------- ------------------ ---- ---------
------- ----------------------- ------------
-- ----------------
---- -- ---- -- ---
------- --------------
------ ---- ---- ----------------------
--- -----
----- -------- ----- -
---- - ----- -------
-------------------------------------------------------------- -- -- -
--------------------------------------------- - ---
---
-
-------- ------- -
----- ---- - -------------------------------------------
-- ------------- -
--------------------------------------------- - -----------------
- ---- -
------------- ----- - --------
-
-
------
---------
-------
-------这个 HTML 文件包含了用户输入姓名的文本框、一个按钮以及一个显示问候语的段落。通过 JavaScript 代码，我们导入了编译后的 WebAssembly 模块，并将其与 DOM 元素绑定起来，以便用户可以与之交互。
结束语
通过以上步骤，我们成功地将一个简单的 Rust 应用程序编译成了 WebAssembly，并在网页上实现了基本的交互功能。这只是开始，Rust 与 WebAssembly 的结合提供了无限的可能性，包括更复杂的图形渲染、游戏开发甚至是高性能的 Web 服务。
随着对 Rust 和 WebAssembly 更深入的理解，你可以尝试更多高级的功能，比如多线程支持、内存管理等，进一步提升你的 Web 开发技能。