当前位置: 首页 > news >正文

Rust WebAssembly 入门教程

一、开发环境搭建

1. 基础工具安装

# 安装 Rust
curl --proto '=https' --tlsv1.2 -sSf https://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. 前端集成

创建 www/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>

创建 www/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 调试

  1. 打开 DevTools(Command + Option + I)
  2. 在 Sources 面板中找到生成的 .wasm 文件
  3. 使用 Console 面板查看日志输出
  4. 在 JavaScript 代码中设置断点

3. 实时开发体验

  1. 修改 Rust 代码会自动触发重新构建
  2. 刷新浏览器即可看到最新变化
  3. 控制台会显示构建状态和错误信息

六、常见问题解决

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) 是否存在

七、开发建议

  1. 工作流程

    • 保持两个终端窗口:一个运行 watch,一个运行服务器
    • 使用 VSCode 的集成终端可以方便地管理多个窗口
    • 定期清理 pkg 目录避免缓存问题
  2. 调试效率

    • 善用 console.log
    • 保持 DevTools 网络面板打开以监控资源加载
    • 使用 Chrome 的 Performance 面板分析性能问题
  3. 最佳实践

    • 模块化组织代码
    • 添加适当的错误处理
    • 保持构建脚本的清晰和可维护性
http://www.lryc.cn/news/547849.html

相关文章:

  • 部署RabbitMQ集群详细教程
  • 20250306JIRA添加企业微信邮箱通知
  • 代码随想录算法训练营第五十七天 | 101. 孤岛的总面积 102. 沉没孤岛 103. 水流问题 104.建造最大岛屿
  • llamafactory大模型微调教程(周易大模型案例)
  • excel 斜向拆分单元格
  • 【JAVA架构师成长之路】【JVM实战】第2集:生产环境内存飙高排查实战
  • MATLAB实现遗传算法优化风电_光伏_光热_储热优化
  • JCRQ1河马算法+四模型对比!HO-CNN-GRU-Attention系列四模型多变量时序预测
  • react中的fiber和初次渲染
  • LLM 大模型基础认知篇
  • leetcode700-二叉搜索树中的搜索
  • 《MySQL三大核心日志解析:Undo Log/Redo Log/Bin Log对比与实践指南》
  • java中实体类常见的设计模式
  • 【够用就好006】如何从零开发游戏上架steam面向AI编程的godot独立游戏制作实录001流程
  • 发行思考:全球热销榜的频繁变动
  • docker目录挂载与卷映射的区别
  • `label` 标签的 `for` 属性详解
  • 公开笔记:自然语言处理(NLP)中文文本预处理主流方法
  • 【一个月备战蓝桥算法】递归与递推
  • 算法策略深度解析与实战应用
  • 【LeetCode 热题 100】3. 无重复字符的最长子串 | python 【中等】
  • 计算机网络(1) 网络通信基础,协议介绍,通信框架
  • 在 Docker 中,无法直接将外部多个端口映射到容器内部的同一个端口
  • 计算机网络开发(2)TCP\UDP区别、TCP通信框架、服务端客户端通信实例
  • ubuntu打包 qt 程序,不用每次都用linuxdeployqt打包
  • 【Python项目】基于深度学习的车辆特征分析系统
  • C++(初阶)(二)——类和对象
  • JS—组成:2分钟掌握什么是ECMAScript操作,什么是DOM操作,什么是BOM操作
  • ArcGIS操作:10 投影坐标系转地理坐标系
  • NVIDIA Jetson Nano的国产替代,基于算能BM1684X+FPGA+AI算力盒子,支持deepseek边缘部署