当前位置：首页 > article >正文

Rust WebAssembly 入门教程

article 2026/3/23 11:55:57

一、开发环境搭建

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 调试

打开 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 面板分析性能问题
最佳实践
- 模块化组织代码
- 添加适当的错误处理
- 保持构建脚本的清晰和可维护性

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-watch2. VSCode 插件安装…...

编程日记 2026/2/16 1:24:10

靶场之路-VulnHub-DC-6 nmap提权、kali爆破、shell反连

靶场之路-VulnHub-DC-6 一、信息收集 1、扫描靶机ip 2、指纹扫描这里扫的我有点懵，这里只有两个端口，感觉是要扫扫目录了 nmap -sS -sV 192.168.122.128 PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 7.4p1 Debian 10deb9u6 (protoc…...

编程日记 2026/3/18 11:15:59

机器视觉开发教程——封装Halcon通用模板匹配工具【含免费教程源码】

目录引言前期准备Step1 设计可序列化的输入输出集合【不支持多线程】Step2 设计程序框架1、抽象层【IProcess】2、父类【HAlgorithm】3、子类【HFindModelTool】 Step3 设计UI结果展示引言通过仿照VisionPro软件二次开发Halcon的模板匹配工具，便于在客户端软件中…...

编程日记 2026/3/17 4:03:52

Android 中 ConstrantLayout 与 RelativeLayout 区别

ConstraintLayout 和 RelativeLayout 都是 Android 开发中常用的布局容器，它们都可以用于构建复杂的用户界面，但在功能、性能、使用方式等方面存在一些区别，下面为你详细介绍： 1. 布局原理 RelativeLayout：RelativeL…...

编程日记 2026/2/15 19:12:42

【3DMAX室内设计】2D转3D平面图插件2Dto3D使用方法

【一键筑梦】革新性2Dto3D插件，轻松实现2D平面图向3D空间的华丽蜕变。这款专为3DMAX室内设计师设计的神器，集一键式墙体、门、窗自动生成功能于一身，能够将2D图形无缝转化为3D网格对象（3D平面图、鸟瞰图），一…...

编程日记 2026/3/16 11:03:18

vscode 查看3d

目录 1. vscode-3d-preview obj查看ok 2. vscode-obj-viewer 没找到这个插件： 3. 3D Viewer for Vscode 查看obj失败 1. vscode-3d-preview obj查看ok 可以查看obj 显示过程：开始是绿屏，过了1到2秒，后来就正常看了。 2. vsc…...

编程日记 2026/3/17 7:27:39

自动驾驶---不依赖地图的大模型轨迹预测

1 前言早期传统自动驾驶方案通常依赖高精地图（HD Map）提供道路结构、车道线、交通规则等信息，可参考博客《自动驾驶---方案从有图迈进无图》，本质上还是存在问题： 数据依赖性高：地图构建成本昂贵&#xf…...

编程日记 2026/3/17 10:21:21

perl初试

我手头有一个脚本，用于从blastp序列比对的结果文件中，进行文本处理， 获取序列比对最优的hit记录 #!/usr/bin/perl -w use strict;my ($blast_out) ARGV; my $usage "This script is to get the best hit from blast output file wit…...

编程日记 2026/3/17 16:07:05

VS Code C++ 开发环境配置

VS Code 是当前非常流行的开发工具. 本文讲述如何配置 VS Code 作为 C开发环境. 本文将按照如下步骤来介绍如何配置 VS Code 作为 C开发环境. 安装编译器安装插件配置工作区第一个步骤的具体操作会因为系统不同或者方案不同而有不同的选择. 环境要求首先需要立即 VS Code…...

编程日记 2026/3/17 12:46:00

Web Snapshot 网页截图模块代码详解

本文将详细解析 Web Snapshot 模块的实现原理和关键代码。这个模块主要用于捕获网页完整截图，特别优化了对动态加载内容的处理。 1. 模块概述 snapshot.py 是一个功能完整的网页截图工具，它使用 Selenium 和 Chrome WebDriver 来模拟真实浏览器行为&am…...

编程日记 2026/3/18 10:04:36

Java TCP 通信：实现简单的 Echo 服务器与客户端

TCP（Transmission Control Protocol）是一种面向连接的、可靠的传输层协议。与 UDP 不同，TCP 保证了数据的顺序、可靠性和完整性，适用于需要可靠传输的应用场景，如文件传输、网页浏览等。本文将基于 Java 实现一个简单的…...

编程日记 2026/2/14 21:32:42

Windows 10 下 SIBR Core (i.e. 3DGS SIBR Viewers) 的编译

本文针对在 Windows 10 上从源码编译安装3DGS （3D Gaussian Splatting）的Viewers 即SIBR Core及外部依赖库extlibs（预编译的版本直接在页面https://sibr.gitlabpages.inria.fr/download.html下载） ，参考SIBR 的官方网站…...

编程日记 2026/3/20 9:01:07

JavaWeb-HttpServletRequest请求域接口

文章目录 HttpServletRequest请求域接口HttpServletRequest请求域接口简介关于请求域和应用域的区别请求域接口中的相关方法获取前端请求参数(getParameter系列方法)存储请求域名参数(Attribute系列方法)获取客户端的相关地址信息获取项目的根路径关于转发和重定向的细致剖析…...

编程日记 2026/3/16 6:46:58

【C++】switch 语句编译报错：error: jump to case label

/home/share/mcrockit_3588/prj_linux/../source/rkvpss.cpp: In member function ‘virtual u32 CRkVpss::Control(u32, void*, u32)’: /home/share/mcrockit_3588/prj_linux/../source/rkvpss.cpp:242:8: error: jump to case label242 | case emRkComCmd_DBG_SaveInput:|…...

编程日记 2026/3/19 5:22:14