rust webassembly与js交互方式 - 问答

Rust WebAssembly (WASM) 是一种用于在现代Web浏览器中运行高性能代码的技术。它允许你使用Rust编程语言编写Web应用程序，并将其编译为可在浏览器中运行的二进制格式。与JavaScript（JS）进行交互是WebAssembly的一个常见应用场景。

要在Rust WebAssembly中与JavaScript进行交互，你需要使用wasm-bindgen和wasm-pack这两个库。下面是详细的步骤：

安装Rust工具链

确保你已经安装了Rust编程语言的工具链，包括rustc编译器、cargo包管理器和wasm32-unknown-unknown目标。如果没有，请访问Rust官网并按照说明进行安装。

创建一个新的Rust项目

使用cargo创建一个新的Rust项目：

cargo new --lib my_wasm_project
cd my_wasm_project

添加依赖库

在Cargo.toml文件中添加wasm-bindgen和wasm-pack作为依赖库：

[package]
name = "my_wasm_project"
version = "0.1.0"
authors = ["Your Name <your.email@example.com>"]
edition = "2018"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
wasm-pack = "0.3"

编写Rust代码

在src/lib.rs文件中编写Rust代码，并使用wasm-bindgen库定义与JavaScript交互的函数。例如：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

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

编译Rust代码为WebAssembly

使用wasm-pack库将Rust代码编译为WebAssembly模块：

wasm-pack build --target web

这将在pkg/目录下生成一个名为my_wasm_project_bg.wasm的WebAssembly模块文件和一个名为index.js的JavaScript绑定文件。

在HTML文件中引入WebAssembly模块

创建一个名为index.html的文件，并在其中引入WebAssembly模块和JavaScript绑定文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust WebAssembly Example</title>
</head>
<body>
    <script src="./pkg/index.js"></script>
    <script>
        // 初始化WebAssembly模块
        const wasmInstance = await WebAssembly.instantiateStreaming(fetch('./pkg/my_wasm_project_bg.wasm'));

        // 获取Rust函数导出
        const { add, greet } = wasmInstance.instance.exports;

        // 调用Rust函数
        const sum = add(1, 2);
        console.log(`1 + 2 = ${sum}`);

        greet("World");
    </script>
</body>
</html>

运行HTML文件

使用一个支持WebAssembly的现代Web浏览器打开index.html文件。你应该能看到控制台输出1 + 2 = 3和Hello, World!。

这就是使用Rust WebAssembly与JavaScript进行交互的基本方法。你可以根据需要编写更复杂的Rust代码，并使用wasm-bindgen库定义更多的与JavaScript交互的函数。

0 赞

0 踩