WebAssembly 基础
学习目标
- 理解 WASM 的用途
- 掌握 wasm-pack 基本流程
- 在浏览器中运行 Rust
核心概念
创建 WASM 项目
cargo install wasm-pack
wasm-pack new my-wasm --template web
lib.rs
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern "C" {
fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet(name: &str) {
alert(&format!("Hello, {}!", name));
}
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
match n {
0 => 0,
1 => 1,
_ => fibonacci(n - 1) + fibonacci(n - 2),
}
}
JavaScript 调用
import init, { greet, fibonacci } from './my_wasm.js';
async function main() {
await init();
greet("World");
console.log("fib(10) =", fibonacci(10));
}
main();
使用 web-sys
[dependencies]
wasm-bindgen = "0.2"
web-sys = { version = "0.3", features = ["console", "Document", "Element", "HtmlElement", "Window"] }
use wasm_bindgen::prelude::*;
use web_sys::window;
#[wasm_bindgen(start)]
pub fn main() -> Result<(), JsValue> {
let window = window().unwrap();
let document = window.document().unwrap();
let body = document.body().unwrap();
let div = document.create_element("div")?;
div.set_text_content(Some("Hello from Rust WASM!"));
body.append_child(&div)?;
Ok(())
}
构建
wasm-pack build --target web
小结
| 工具 | 用途 |
|---|
wasm-pack | 构建 WASM |
wasm-bindgen | JS 互操作 |
web-sys | Web API 绑定 |
js-sys | JS 标准库绑定 |