WASM 使用说明23事(RUST实现)

news2024/10/27 8:55:28

文章目录

- 1. wasm是什么
- - 1.1 chatgpt定义如下:
  - 1.2 wasm关键特性：
- 2. wasm demo
- - 2.1 cargo 创建项目
  - 2.2 编写code
  - 2.3 安装wasm-pack
  - 2.4 编译
- 3.1 html页面引用wasm代码（js引用）
- 3.2 访问页面
- 4 导入js function
- - 4.1 编写lib.rs文件，内容如下：
  - 4.2 编译
  - 4.3 html
  - 4.4 访问页面，结果如下:

1. wasm是什么

1.1 chatgpt定义如下:

WebAssembly（WASM）是一种新兴的、低级的二进制格式，旨在为 web 提供一种高性能的执行环境。它可以与 JavaScript 互操作，使开发者能够在浏览器中运行复杂的应用程序，比如游戏、图形处理、科学计算等。

1.2 wasm关键特性：

高性能：WASM 被设计为快速加载和执行，接近原生代码的性能。
安全性：WASM 在一个安全的沙箱环境中运行，可以防止未授权的内存访问。
跨平台：可以在任何支持的环境中运行，包括浏览器、服务器和嵌入式设备。
语言支持：除了 JavaScript，许多编程语言（如
Rust、C、C++、Go）可以编译为 WASM。

2. wasm demo

2.1 cargo 创建项目

cargo new --lib wasm-hello

2.2 编写code

2.2.1 修改Cargo.toml文件，内容如下：

[package]
name = "wasm-hello"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"

2.2.2 修改src/lib.rs文件，内容如下：

use wasm_bindgen::prelude::*;

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

2.3 安装wasm-pack

cargo install wasm-pack

2.4 编译

进入项目根目录，然后编译

wasm-pack build --target web

命令执行成功后，截图如下：
说明： 1. wasm_hello_bg.wasm就是输出的二进制文件
在这里插入图片描述

3.1 html页面引用wasm代码（js引用）

wasm-hello根目录下创建index.html页面，内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello World - Rust</title>
    <script type="module">
        import init from "./pkg/wasm_hello.js";
        const runWasm = async () => {
            // Instantiate our wasm module
            const helloWorld = await init("./pkg/wasm_hello_bg.wasm");

            // Call the Add function export from wasm, save the result
            const addResult = helloWorld.add(24, 24);

            // Set the result onto the body
            document.body.textContent = `Hello World! addResult: ${addResult}`;
        };
        runWasm();
    </script>
</head>
<body></body>
</html>

3.2 访问页面

截图如下：
在这里插入图片描述

4 导入js function

4.1 编写lib.rs文件，内容如下：

use wasm_bindgen::prelude::*;

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

// Here, we will define our external `console.log`
#[wasm_bindgen]
extern "C" {
    // Use `js_namespace` here to bind `console.log(..)` instead of just
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// Export a function that will be called in JavaScript
// but call the "imported" console.log.
#[wasm_bindgen]
pub fn console_log_from_wasm() {
    log("This console.log is from wasm!");
}

4.2 编译

进入项目根目录，然后编译

wasm-pack build --target web

4.3 html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello World - Rust</title>
    <script type="module">
        import init from "./pkg/wasm_hello.js";
        const runWasm = async () => {
            // Instantiate our wasm module
            const helloWorld = await init("./pkg/wasm_hello_bg.wasm");

            // Call the Add function export from wasm, save the result
            const addResult = helloWorld.add(24, 24);

            // Set the result onto the body
            document.body.textContent = `Hello World! addResult: ${addResult} `;

            helloWorld.console_log_from_wasm();
        };
        runWasm();
    </script>
</head>
<body></body>
</html>