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

文章目录

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

4.4 访问页面， 结果如下:

页面有console输出"This console.log is from wasm!"