使用WebAssembly和Rust：从A到Z

WebAssembly和Rust简介

WebAssembly（WASM）是一种低级二进制指令格式，允许在浏览器中以接近原生的速度运行高性能代码。Rust凭借其所有权系统和无垃圾回收机制，是编译为WebAssembly的理想语言。在本文中，我们将从工具安装到创建完整的Rust WASM模块，一步步进行讲解。

为什么选择Rust？它提供了安全的内存管理、最小的二进制文件大小和出色的性能。结合WebAssembly，您可以编写复杂的算法、游戏、图形编辑器，甚至是在浏览器中运行的完整应用程序。

工具安装和环境准备

开始之前，您需要准备以下工具：

• Rust（通过rustup安装）
• 目标平台wasm32-unknown-unknown
• wasm-pack工具（用于构建和发布WASM）
• 基本的HTTP服务器（例如python3 -m http.server）

安装目标平台和wasm-pack：

# 安装WebAssembly的目标平台rustup target add wasm32-unknown-unknown

# 安装wasm-packcargo install wasm-pack

现在创建一个新项目：

cargo new --lib wasm-rust-democd wasm-rust-demo

打开Cargo.toml并添加依赖：

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

[dependencies]wasm-bindgen = "0.2"

cdylib标志表示我们正在创建一个与WebAssembly兼容的动态库。

编写第一个Rust WASM模块

创建一个可以从JavaScript调用的简单函数。编辑src/lib.rs：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn greet(name: &str) -> String {    format!("你好，{}！欢迎来到WebAssembly的世界！", name)}

#[wasm_bindgen]pub fn fibonacci(n: u32) -> u32 {    match n {        0 => 0,        1 => 1,        _ => fibonacci(n - 1) + fibonacci(n - 2),    }}

#[wasm_bindgen]pub fn add(a: i32, b: i32) -> i32 {    a + b}

#[wasm_bindgen]属性允许将函数导出到JavaScript。注意：String会自动转换为JavaScript字符串。

现在构建项目：

wasm-pack build --target web

构建完成后，pkg文件夹中将出现以下文件：

• wasm_rust_demo_bg.wasm — 编译后的WASM模块
• wasm_rust_demo.js — 用于方便导入的JavaScript包装器
• wasm_rust_demo.d.ts — TypeScript声明文件

与JavaScript和HTML集成

在项目根目录创建index.html文件：

<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Rust + WebAssembly 演示</title></head><body>    <h1>Rust + WebAssembly 示例</h1>        <div>        <h3>greet 函数</h3>        <input type="text" id="nameInput" placeholder="输入名称" value="世界">        <button id="greetBtn">打招呼</button>        <p id="greetOutput"></p>    </div>

    <div>        <h3>斐波那契数列</h3>        <input type="number" id="fibInput" value="10" min="0" max="40">        <button id="fibBtn">计算</button>        <p id="fibOutput"></p>    </div>

    <script type="module">        import init, { greet, fibonacci, add } from './pkg/