RustWebAssembly入门教程
- IT业界
- 2025-09-11 12:03:01
一、开发环境搭建 1. 基础工具安装 # 安装 Rust curl --proto '=https' --tlsv1.2 -sSf sh.rustup.rs | sh # 安装 wasm-pack cargo install wasm-pack # 安装开发服务器 cargo install basic-http-server # 安装文件监听工具 cargo install cargo-watch 2. VSCode 插件安装 rust-analyzer: Rust 语言支持CodeLLDB: 调试支持WebAssembly: WASM 代码高亮 二、项目设置 1. 项目初始化 cd /Users/xubai/workspace/xubai/rust-demo cargo new --lib wasm-demo cd wasm-demo 2. 配置 Cargo.toml [package] name = "wasm-demo" version = "0.1.0" edition = "2021" [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2" js-sys = "0.3" web-sys = { version = "0.3", features = ["console"] } console_error_panic_hook = "0.1" 3. 配置开发环境
创建 .gitignore 文件：
/target /pkg Cargo.lock 三、开发工作流配置 1. 自动构建设置打开一个终端，运行以下命令来启动自动构建：
cargo watch -i .gitignore -i "pkg/*" -s "wasm-pack build --target web --dev" 2. 开发服务器在另一个终端窗口运行：
basic-http-server .现在，当你修改任何源代码文件时，项目会自动重新构建，并且可以通过 http://localhost:4000 访问。
四、基础示例实现 1. 简单计数器 use wasm_bindgen::prelude::*; use web_sys::console; #[wasm_bindgen] pub struct Counter { count: i32, } #[wasm_bindgen] impl Counter { pub fn new() -> Counter { Counter { count: 0 } } pub fn increment(&mut self) -> i32 { self.count += 1; self.count } } 2. 前端集成创建 /index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>WASM Demo</title> </head> <body> <h1>WASM 计数器示例</h1> <button id="increment">增加</button> <p>当前计数：<span id="count">0</span></p> <script type="module" src="./index.js"></script> </body> </html>创建 /index.js:
import init, { Counter } from '../pkg/wasm_demo.js'; async function main() { await init(); const counter = Counter.new(); const button = document.getElementById('increment'); const countDisplay = document.getElementById('count'); button.onclick = () => { const count = counter.increment(); countDisplay.textContent = count; }; } main().catch(console.error); 五、调试技巧 1. Rust 代码调试 // 在 Rust 代码中打印日志 console::log_1(&JsValue::from_str("调试信息")); // 使用 console_error_panic_hook #[wasm_bindgen(start)] pub fn main() -> Result<(), JsValue> { console_error_panic_hook::set_once(); Ok(()) } 2. Chrome DevTools 调试 打开 DevTools（Command + Option + I）在 Sources 面板中找到生成的 .wasm 文件使用 Console 面板查看日志输出在 JavaScript 代码中设置断点 3. 实时开发体验 修改 Rust 代码会自动触发重新构建刷新浏览器即可看到最新变化控制台会显示构建状态和错误信息 六、常见问题解决 1. 构建失败 检查 Cargo.toml 依赖是否正确确保 wasm-pack 版本最新查看 Rust 编译错误信息 2. 加载失败 // 添加错误处理 init().catch(err => { console.error("WASM 加载失败:", err); // 显示用户友好的错误信息 document.body.innerHTML = ` <div style="color: red;"> 加载失败，请刷新页面重试 </div> `; }); 3. 开发服务器问题 确保端口 4000 未被占用检查文件权限验证构建输出目录 (pkg) 是否存在 七、开发建议工作流程
保持两个终端窗口：一个运行 watch，一个运行服务器使用 VSCode 的集成终端可以方便地管理多个窗口定期清理 pkg 目录避免缓存问题调试效率
善用 console.log保持 DevTools 网络面板打开以监控资源加载使用 Chrome 的 Performance 面板分析性能问题最佳实践
模块化组织代码添加适当的错误处理保持构建脚本的清晰和可维护性RustWebAssembly入门教程由讯客互联IT业界栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“RustWebAssembly入门教程”
