wasm rust 怎样集成使用 - 问答

要在 Rust 中集成 WebAssembly (WASM)，你需要遵循以下步骤：

安装 Rust 和 WebAssembly 工具链

确保你已经安装了 Rust。如果没有，请访问 Rust 官方网站并按照说明进行安装。接下来，安装 WebAssembly 工具链，它包括 wasm32-unknown-unknown 目标。在命令行中运行以下命令：

rustup target add wasm32-unknown-unknown

创建一个新的 Rust 项目

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

cargo new my_wasm_project
cd my_wasm_project

在 Cargo.toml 中添加 WebAssembly 依赖项

在项目的 Cargo.toml 文件中，添加 wasm-bindgen 和 wasm-pack 作为依赖项。wasm-bindgen 用于在 Rust 和 JavaScript 之间进行交互，而 wasm-pack 是一个用于构建和发布 WebAssembly 包的工具。

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

编写 Rust 代码

在 src/lib.rs 文件中，编写你的 Rust 代码。例如，创建一个简单的函数，该函数将两个数字相加：

use wasm_bindgen::prelude::*;

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

构建 WebAssembly 模块

在命令行中运行以下命令，以构建 WebAssembly 模块：

wasm-pack build --target web

这将在 pkg/ 目录下生成 WebAssembly 二进制文件和相关的 JavaScript 绑定。

在 HTML 文件中使用 WebAssembly 模块

创建一个名为 index.html 的文件，并在其中添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My WebAssembly Project</title>
</head>
<body>
    <script type="module">
        import init, { add } from './pkg/my_wasm_project.js';

        async function run() {
            await init();
            const result = add(1, 2);
            console.log(`1 + 2 = ${result}`);
        }

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

注意 import 语句中的文件路径，它应该与 wasm-pack build 生成的 pkg/ 目录结构相匹配。

运行 Web 服务器

要运行此示例，你需要一个 Web 服务器。你可以使用 Python 内置的 HTTP 服务器：

python -m http.server

然后在浏览器中打开 http://localhost:8000，你应该看到控制台中输出 1 + 2 = 3。

这就是在 Rust 中集成 WebAssembly 的基本方法。你可以根据需要编写更复杂的 Rust 代码，并使用 wasm-bindgen 和 wasm-pack 构建和部署 WebAssembly 模块。

0 赞

0 踩