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

Rust WebAssembly 入门教程

news 2025/9/17 23:10:16

一、开发环境搭建

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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/9/17 0:58:55

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/9/17 21:33:42

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2025/9/5 17:56:03

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/9/8 17:56:14

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/9/14 12:35:29

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/9/17 8:39:28

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/9/17 7:09:29

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/7/7 7:20:27

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16