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

Rust WebAssembly 入门教程

news 文章来源：https://blog.csdn.net/qq_35732986/article/details/146017495 2025/5/16 22:30:51

一、开发环境搭建

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

算法策略深度解析与实战应用

一、算法策略的本质与价值 算法策略是计算机科学的灵魂&#xff0c;它决定了问题解决的效率与质量。优秀的算法设计者就像战场上的指挥官&#xff0c;需要根据地形&#xff08;问题特征&#xff09;选择最佳战术&#xff08;算法策略&#xff09;。本文将深入剖析五大核心算法…...

编程日记 2025/3/7 23:42:44

【LeetCode 热题 100】3. 无重复字符的最长子串 | python 【中等】

美美超过管解 题目&#xff1a; 3. 无重复字符的最长子串 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。 注…...

编程日记 2025/3/7 23:40:41

计算机网络（1） 网络通信基础，协议介绍，通信框架

网络结构模式 C/S-----客户端和服务器 B/S -----浏览器服务器 MAC地址 每一个网卡都拥有独一无二的48位串行号&#xff0c;也即MAC地址&#xff0c;也叫做物理地址、硬件地址或者是局域网地址 MAC地址表示为12个16进制数 如00-16-EA-AE-3C-40 &#xff08;每一个数可以用四个…...

编程日记 2025/3/7 23:39:40

在 Docker 中，无法直接将外部多个端口映射到容器内部的同一个端口

Docker 的端口映射是一对一的&#xff0c;即一个外部端口只能映射到容器内部的一个端口。 1. 为什么不能多对一映射&#xff1f; 端口冲突&#xff1a; 如果外部多个端口映射到容器内部的同一个端口&#xff0c;Docker 无法区分外部请求应该转发到哪个内部端口&#xff0c;会…...

编程日记 2025/3/7 23:37:38

计算机网络开发（2）TCP\UDP区别、TCP通信框架、服务端客户端通信实例

TCP与UDP区别 UDP&#xff1a;用户数据报协议&#xff0c;面向无连接&#xff0c;可以单播&#xff0c;多播&#xff0c;广播&#xff0c; 面向数据报&#xff0c;不可靠TCP&#xff1a;传输控制协议&#xff0c;面向连接的&#xff0c;可靠的&#xff0c;基于字节流&#xff…...

编程日记 2025/3/7 23:35:35

ubuntu打包 qt 程序，不用每次都用linuxdeployqt打包

用linuxdeployqt打包太麻烦&#xff0c;每次程序编译都要用linuxdeployqt打包一次&#xff0c;而且每次都要很长时间&#xff0c;通过研究得出一个新的打包方法 1.用用linuxdeployqt得出依赖的库文件&#xff08;只要没有增加新模块&#xff0c;只要用一次就可以&#xff09; …...

编程日记 2025/3/7 23:34:34

【Python项目】基于深度学习的车辆特征分析系统

【Python项目】基于深度学习的车辆特征分析系统 技术简介&#xff1a;采用Python技术、MySQL数据库、卷积神经网络&#xff08;CNN&#xff09;等实现。 系统简介&#xff1a;该系统基于深度学习技术&#xff0c;特别是卷积神经网络&#xff08;CNN&#xff09;&#xff0c;用…...

编程日记 2025/3/7 23:33:33

C++（初阶）（二）——类和对象

类和对象 类和对象类的定义格式访问限定符类域 实例化实例化概念内存对齐 this指针 类的定义 类&#xff08;Class&#xff09;是一种用于创建对象的蓝图或模板。它定义了对象&#xff08;变量&#xff09;的属性&#xff08;数据&#xff09;和方法&#xff08;行为&#xff…...

编程日记 2025/3/7 23:29:26

JS—组成：2分钟掌握什么是ECMAScript操作，什么是DOM操作，什么是BOM操作

个人博客&#xff1a;haichenyi.com。感谢关注 1. 目录 1–目录2–组成3–内置对象 2. 组成 一直都在说JS&#xff0c;JS&#xff0c;到底啥是JS有了解过吗&#xff1f;JS由哪几部分组成的呢&#xff1f; 定义&#xff1a; JavaScript是一种轻量级、解释型或即时编译型的编程语…...

编程日记 2025/3/7 23:26:22

ArcGIS操作：10 投影坐标系转地理坐标系

应用情景&#xff1a;在计算shp面质心坐标的时&#xff0c;由于需要的坐标是经纬度&#xff0c;所以需要将投影坐标系转化为地理坐标系 1、打开工具箱 2、右侧&#xff1a;数据管理工具 → 投影和变换 → 要素 → 投影 3、选择投影的数据、输出路径、地理坐标系&#xff0c;点…...

编程日记 2025/3/7 23:19:14