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

Rust WebAssembly 入门教程

news 2026/2/9 2:12:41

一、开发环境搭建

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. 最佳实践

    • 模块化组织代码
    • 添加适当的错误处理
    • 保持构建脚本的清晰和可维护性

相关文章：

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

编程日记 2025/3/8 0:51:02

部署RabbitMQ集群详细教程

部署RabbitMQ集群详细教程 下面是一份在 Ubuntu 环境下部署 RabbitMQ 集群的详细步骤说明&#xff0c;涉及主机名设置、Erlang & RabbitMQ 安装、管理插件启用、集群通信 Cookie 配置、节点加入集群、镜像队列策略设置以及集群验证等。为了演示方便&#xff0c;以下示例假…...

编程日记 2025/3/8 0:50:00

20250306JIRA添加企业微信邮箱通知

文章目录 一&#xff0c;参考链接如下二&#xff0c;补充内容1&#xff0c;登录企业邮箱2&#xff0c;设置密码3&#xff0c;设置收发信设置 一&#xff0c;参考链接如下 参考链接&#xff1a;https://blog.csdn.net/icett/article/details/142520823 二&#xff0c;补充内容…...

编程日记 2025/3/8 0:45:56

代码随想录算法训练营第五十七天 | 101. 孤岛的总面积 102. 沉没孤岛 103. 水流问题 104.建造最大岛屿

101. 孤岛的总面积 题目链接&#xff1a;KamaCoder 文档讲解&#xff1a;代码随想录 状态&#xff1a;AC Java代码&#xff1a; import java.util.*;class Main {static int count 0;static int res 0;static boolean island true;public static int[][] dir new int[][]{…...

编程日记 2025/3/8 0:33:42

llamafactory大模型微调教程（周易大模型案例）

1.环境说明 操作系统&#xff1a;ubuntu 20 基础模型&#xff1a;Qwen2.5-1.5B-Instruct 工具&#xff1a;llamafactory GPU&#xff1a;四张4090 2、环境部署 2.1 下载基础模型 # 1、下载 modelscope pip install modelscope#2、模型下载 cd /data/ cat >> download…...

编程日记 2025/3/8 0:32:40

excel 斜向拆分单元格

右键-合并单元格 右键-设置单元格格式-边框 在设置好分割线后&#xff0c;你可以开始输入文字。 需要注意的是&#xff0c;文字并不会自动分成上下两行。 为了达到你期望的效果&#xff0c;你可以通过 同过左对齐、上对齐 空格键或使用【AltEnter】组合键来调整单元格中内容的…...

编程日记 2025/3/8 0:31:39

【JAVA架构师成长之路】【JVM实战】第2集：生产环境内存飙高排查实战

课程标题：生产环境内存飙高排查实战——从堆转储到代码修复的15分钟指南 目标：掌握内存泄漏与OOM问题的系统性排查方法，快速定位代码或配置缺陷 0-1分钟：问题引入与核心现象 线上服务内存持续增长，触发频繁Full GC甚至OOM（OutOfMemoryError），导致服务崩溃。常见诱因：…...

编程日记 2025/3/8 0:29:36

MATLAB实现遗传算法优化风电_光伏_光热_储热优化

1. 问题定义 目标&#xff1a;最小化输出负荷与需求负荷的偏差平方和。决策变量&#xff1a;每个时间步长的风电、光伏、光热和储热输出功率。约束条件&#xff1a; 风电、光伏、光热的输出功率不得超过其最大容量。储热系统的输出功率&#xff08;充放电&#xff09;不得超过…...

编程日记 2025/3/8 0:25:32

JCRQ1河马算法+四模型对比！HO-CNN-GRU-Attention系列四模型多变量时序预测

JCRQ1河马算法四模型对比&#xff01;HO-CNN-GRU-Attention系列四模型多变量时序预测 目录 JCRQ1河马算法四模型对比&#xff01;HO-CNN-GRU-Attention系列四模型多变量时序预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 基于HO-CNN-GRU-Attention、CNN-GRU-Attent…...

编程日记 2025/3/8 0:18:24

react中的fiber和初次渲染

源码中定义了不同类型节点的枚举值 组件类型 文本节点HTML标签节点函数组件类组件等等 src/react/packages/react-reconciler/src/ReactWorkTags.js export const FunctionComponent 0; export const ClassComponent 1; export const IndeterminateComponent 2; // Befo…...

编程日记 2025/3/8 0:15:21

LLM 大模型基础认知篇

目录 1、基本概述 2、大模型工作原理 3、关键知识点 &#xff08;1&#xff09;RAG 知识库 &#xff08;2&#xff09;蒸馏 &#xff08;3&#xff09;微调 &#xff08;4&#xff09;智能体 1、基本概述 大型语言模型&#xff08;Large Language Model, LLM&#xff09…...

编程日记 2025/3/8 0:14:20

leetcode700-二叉搜索树中的搜索

leetcode 700 思路 我们需要先了解一下二叉搜索树的特性&#xff1a; 左子树的所有节点值 < 当前节点的值。右子树的所有节点值 > 当前节点的值。这个特性适用于树中的每个节点 那么根据这个特性&#xff0c;我们可以通过根节点的值和目标值的大小来判断后序的走向&…...

编程日记 2025/3/8 0:11:16

《MySQL三大核心日志解析：Undo Log/Redo Log/Bin Log对比与实践指南》

MySQL三大核心日志解析&#xff1a;Undo Log/Redo Log/Bin Log对比与实践指南 一、核心日志全景概览 在MySQL数据库体系中&#xff0c;Undo Log、Redo Log和Bin Log构成了事务处理和数据安全的三大基石。这三大日志各司其职&#xff0c;协同保障了数据库的ACID特性与高可用架…...

编程日记 2025/3/8 0:10:15

java中实体类常见的设计模式

实体类常见的设计模式 1. Set 链式编程 在实体类中实现链式调用通常是指让 setter 方法返回当前对象实例&#xff08;this&#xff09;&#xff0c;从而允许连续调用多个 setter 方法设置属性值。这种方式可以使代码更加简洁和直观。 例如实体类为&#xff1a; public clas…...

编程日记 2025/3/8 0:02:07

【够用就好006】如何从零开发游戏上架steam面向AI编程的godot独立游戏制作实录001流程

记录工作实践 这是全新的系列&#xff0c;一直有个游戏制作梦 感谢AI时代&#xff0c;让这一切变得可行 长欢迎共同见证&#xff0c;期更新&#xff0c;欢迎保持关注&#xff0c;待到游戏上架那一天&#xff0c;一起玩 面向AI编程的godot独立游戏制作流程实录001 本期是第…...

编程日记 2025/3/8 0:01:05

发行思考：全球热销榜的频繁变动

几点杂感&#xff1a; 1、单机游戏销量与在线人数的衰退是剧烈的&#xff0c;有明显的周期性&#xff0c;而在线游戏则稳定很多。 如去年的某明星游戏&#xff0c;最高200多万在线&#xff0c;如今在线人数是48名&#xff0c;3万多。 而近期热门的是MH&#xff0c;在线人数8…...

编程日记 2025/3/8 0:00:04

docker目录挂载与卷映射的区别

在 Docker 中&#xff0c;目录挂载&#xff08;Bind Mount&#xff09;和卷映射&#xff08;Volume Mount&#xff09;的命令语法差异主要体现在路径格式上&#xff0c;具体表现为是否以斜杠&#xff08;/&#xff09;开头。以下是两者的核心区别及使用场景的总结&#xff1a; …...

编程日记 2025/3/7 23:59:03

`label` 标签的 `for` 属性详解

一、基本概念 label 标签的 for 属性用于将标签与表单控件&#xff08;如 input、select 等&#xff09;绑定&#xff0c;其值需与目标元素的 id 完全匹配。这种关联允许用户点击标签时触发控件交互&#xff08;如聚焦输入框或切换复选框&#xff09;&#xff0c;提升操作便捷…...

编程日记 2025/3/7 23:56:00

公开笔记：自然语言处理（NLP）中文文本预处理主流方法

在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;将中文文本转化为数字的主流方法主要集中在预训练语言模型和子词编码技术上。这些方法能够更好地捕捉语义信息&#xff0c;并且在各种NLP任务中表现出色。以下是目前主流的文本编码方法&#xff1a; 1. 基于预训练语…...

编程日记 2025/3/7 23:49:53

【一个月备战蓝桥算法】递归与递推

字典序 在刷题和计算机科学领域&#xff0c;字典序&#xff08;Lexicographical order&#xff09;也称为词典序、字典顺序、字母序&#xff0c;是一种对序列元素进行排序的方式&#xff0c;它模仿了字典中单词的排序规则。下面从不同的数据类型来详细解释字典序&#xff1a; …...

编程日记 2025/3/7 23:45:48

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2026/1/12 10:41:22

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2026/1/26 10:00:16

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2026/2/7 0:48:56

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/12/25 18:03:56

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2026/1/31 8:16:58

从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

编程新知 2026/1/31 12:30:32