首页
/ 使用`wasm-bindgen`进行Rust与WebAssembly交互教程

使用`wasm-bindgen`进行Rust与WebAssembly交互教程

2024-08-07 17:58:04作者：昌雅子Ethen
wasm-bindgen
Facilitating high-level interactions between Wasm modules and JavaScript
项目地址：https://gitcode.com/gh_mirrors/wa/wasm-bindgen

1. 项目介绍

wasm-bindgen是一个Rust库和CLI工具，它简化了WebAssembly模块与JavaScript之间的高级交互。该项目旨在提供一种方法，以便在Rust中定义JS类，从JavaScript传递字符串或对象到Rust，以及从Rust返回它们。wasm-bindgen不仅支持基本类型的交换，还支持更复杂的类型，如字符串、类和对象。它通过自动化绑定生成来减少手动编写转换代码的工作量。

2. 项目快速启动

安装wasm-bindgen-cli

首先确保已经安装了cargo，然后执行以下命令安装wasm-bindgen-cli：

cargo install wasm-bindgen-cli

创建简单的示例

创建一个新的Rust项目：

cargo new my_wasm_project --lib
cd my_wasm_project

在src/lib.rs中添加以下代码:

#[wasm_bindgen]
pub fn say_hello() {
    println!("Hello, WebAssembly!");
}

编译项目并生成WebAssembly文件：

wasm-bindgen --out-dir target/wasm32-unknown-unknown/release --target web src/lib.rs

接下来，在HTML中使用这个WebAssembly模块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WASM Bindgen Example</title>
    <script type="module">
        import init, { say_hello } from './target/wasm32-unknown-unknown/release/my_wasm_project.js';

        async function run() {
            await init();
            say_hello(); // 在控制台应看到“Hello, WebAssembly!”
        }

        run();
    </script>
</head>
<body></body>
</html>

将HTML保存为index.html并在浏览器中打开。

3. 应用案例和最佳实践

案例1：从JavaScript调用Rust函数

在Rust中定义一个接受字符串参数的函数：

#[wasm_bindgen]
pub fn greet(name: &str) {
    println!("Hello, {}!", name);
}

在JavaScript中调用该函数：

import * as wasm from './my_wasm_project.js';
wasm.greet("World");

最佳实践：利用async/await处理异步

当处理Web API时，经常需要异步操作。wasm-bindgen支持async/await语法，使异步交互更加清晰：

#[wasm_bindgen]
pub async fn fetch_data(url: &str) -> Result<String, JsValue> {
    let resp = await!(fetch(url));
    Ok(await!(resp.text())?)
}

4. 典型生态项目

  • js-sys: 提供对JavaScript核心API的低级绑定。
  • web-sys: 提供对完整的Web API（DOM、WebGL等）的低级绑定。
  • wasm-bindgen-futures: 支持Rust中的futures和promises。
  • wasm-bindgen-test: 专为测试WebAssembly模块设计的框架。

以上内容是wasm-bindgen的基本介绍和入门指南。深入了解和进阶使用，请参考官方文档及教程资源。祝您开发愉快！

wasm-bindgen
Facilitating high-level interactions between Wasm modules and JavaScript
项目地址：https://gitcode.com/gh_mirrors/wa/wasm-bindgen

相关内容推荐

1 Rust WebAssembly 书籍教程2 Rust与WebAssembly教程3 `wasm-bindgen` 教程4 探秘WebAssembly组件模型：wit-bindgen带来的高效能跨语言绑定5 Rust和WebAssembly模板项目教程6 Rust和WebAssembly项目模板教程7 imagequant-wasm 项目使用教程8 Rust WASM Walrus 项目教程9 Rive-WASM 开源项目使用手册10 Rust WebGL2 示例项目教程
热门项目推荐
相关项目推荐

热门内容推荐

1 开源项目 developer-roadmap 使用教程2 开发者路线图项目教程3 开源项目教程：awesome-selfhosted4 开源项目 `awesome-selfhosted` 使用教程5 Vue.js 教程与指南6 Vue.js 项目教程7 Linux 内核项目使用教程8 开源项目指南：Linux 内核9 推荐项目：探索 Linux 内核的奥秘10 TensorFlow 开源项目教程

最新内容推荐

《探索Motorcar：3D窗口系统的构建与实战指南》 《深入掌握OpenPTrack：安装与实战指南》 《C++操作符库taocpp/operators安装与使用教程》 《Boundingmesh项目实战指南：安装、配置与深度探索》 探索BH1750：环境光传感器的Arduino库使用指南 探索三维世界：cpu_tsdf开源项目的安装与使用教程 《深入理解并使用C++命令行解析库：ArgumentParser》 探索Embxx：嵌入式C++库的安装与使用指南 探索Xspray：一款功能强大的lldb前端工具安装与使用指南 深入解析Valijson：安装、使用与实践指南

项目优选

收起
Python-100-DaysPython-100-Days
Python - 100天从新手到大师
Python
610
115
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码，欢迎大家投稿，在仓颉鸿蒙社区展现你的妙趣设计！
Cangjie
286
79
mdmd
✍ WeChat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器：支持 Markdown 语法、色盘取色、多图上传、一键下载文档、自定义 CSS 样式、一键重置等特性
Vue
111
25
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！
C
60
48
RuoYi-Cloud-Vue3RuoYi-Cloud-Vue3
🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统
Vue
45
29
go-stockgo-stock
🦄🦄🦄AI赋能股票分析：自选股行情获取，成本盈亏展示，涨跌报警推送，市场整体/个股情绪分析，K线技术指标分析等。数据全部保留在本地。支持DeepSeek，OpenAI， Ollama，LMStudio，AnythingLLM，硅基流动，火山方舟，阿里云百炼等平台或模型。
Go
1
0
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
205
57
MateChatMateChat
前端智能化场景解决方案UI库，轻松构建你的AI应用，我们将持续完善更新，欢迎你的使用与建议。 官网地址：https://matechat.gitcode.com
376
36
RuoYi-VueRuoYi-Vue
🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本
Java
182
44
frogfrog
这是一个人工生命试验项目，最终目标是创建“有自我意识表现”的模拟生命体。
Java
8
0