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

2024-08-07 17:58:04作者：昌雅子Ethen

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

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

leetcode

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

🔥🔥🔥ShopXO企业级免费开源商城系统，可视化DIY拖拽装修、包含PC、H5、多端小程序(微信+支付宝+百度+头条&抖音+QQ+快手)、APP、多仓库、多商户、多门店、IM客服、进销存，遵循MIT开源协议发布、基于ThinkPHP8框架研发

JavaScript

apinto

基于golang开发的网关。具有各种插件，可以自行扩展，即插即用。此外，它可以快速帮助企业管理API服务，提高API服务的稳定性和安全性。

金融AI编程实战

为非计算机科班出身 (例如财经类高校金融学院) 同学量身定制，新手友好，让学生以亲身实践开源开发的方式，学会使用计算机自动化自己的科研/创新工作。案例以量化投资为主线，涉及 Bash、Python、SQL、BI、AI 等全技术栈，培养面向未来的数智化人才 (如数据工程师、数据分析师、数据科学家、数据决策者、量化投资人)。

Python

gitea

喝着茶写代码！最易用的自托管一站式代码托管平台，包含Git托管，代码审查，团队协作，软件包和CI/CD。