96·跨平台进阶

WebAssembly 基础

WebAssembly 基础

学习目标

  1. 理解 WASM 的用途
  2. 掌握 wasm-pack 基本流程
  3. 在浏览器中运行 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-bindgenJS 互操作
web-sysWeb API 绑定
js-sysJS 标准库绑定

练习编辑器

rust
Loading...