wasm rust 能怎样运行 - 问答

WebAssembly (WASM) 是一种用于现代Web浏览器的二进制指令格式。Rust 是一种系统编程语言，可以编译成 WASM 以在Web上运行。要在Web浏览器中运行 Rust 编译的 WASM 代码，请按照以下步骤操作：

安装 Rust 工具链：首先，确保已安装 Rust。这将安装 cargo（Rust 的包管理器和构建系统）和 rustc（Rust 编译器）。
创建一个新的 Rust 项目：使用 cargo new wasm_example 命令创建一个新的 Rust 项目。这将生成一个包含基本代码结构的项目。
进入项目目录：使用 cd wasm_example 命令进入项目目录。
添加 WebAssembly 目标：在项目根目录下创建一个名为 Cargo.toml 的文件（如果尚未存在），并添加以下内容：
```
[package]
name = "wasm_example"
version = "0.1.0"
authors = ["Your Name <your.email@example.com>"]
edition = "2018"

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

[dependencies]
wasm-bindgen = "0.2"
```
这将添加 wasm-bindgen 库，用于在 Rust 和 JavaScript 之间进行交互。
编写 Rust 代码：在 src/lib.rs 文件中编写以下代码：
```
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}
```
这段代码定义了一个名为 add 的函数，该函数接受两个整数参数并返回它们的和。使用 #[wasm_bindgen] 属性将该函数暴露给 JavaScript。
构建 WASM 代码：在项目根目录下运行 cargo build --target wasm32-unknown-unknown --release 命令。这将生成一个名为 pkg/wasm_example.wasm 的 WASM 文件。

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

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

        async function run() {
            await init();
            const result = add(1, 2);
            console.log('Result:', result);
        }

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

这个 HTML 文件包含一个名为 init 的函数，用于加载 WASM 模块。它还调用 add 函数并将结果输出到控制台。

使用一个简单的 Web 服务器运行：为了在本地运行此示例，可以使用一个简单的 Web 服务器。在项目根目录下运行 python -m http.server（如果已安装 Python）或 npm install -g serve（如果已安装 Node.js 和 npm）。
在浏览器中打开 HTML 文件：在浏览器中打开 http://localhost:8000，你应该看到控制台中输出的结果（在这种情况下为 “Result: 3”）。

这就是使用 Rust 和 WebAssembly 在浏览器中运行代码的基本过程。你可以根据需要扩展此示例，以创建更复杂的应用程序。

0 赞

0 踩