Rust语言初探：WebAssembly 入门

我码玄黄

于 2024-09-09 09:33:26 发布

阅读量1.3k

点赞数 20

分类专栏：前端教你一招思维的火花文章标签： rust wasm 开发语言

本文链接：https://blog.csdn.net/qq_30333063/article/details/142046709

版权

教你一招同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

思维的火花

61 篇文章 3 订阅

订阅专栏

前端

38 篇文章 0 订阅

订阅专栏

Rust语言初探：WebAssembly 入门

前言

在我的印象中，Rust 一直是比较底层的语言，例如在操作系统底层、高性能中间件等底层场景才会看到它的身影。

然而，随着技术的发展，Rust 也开始在前端场景如 WebAssembly 中崭露头角，并且在后端领域也出现了 Rust 语言的框架。

这种多场景的适用性让我决定深入学习 Rust 的基本操作，而 WebAssembly 就是一个很好的起点。

Rust 简介（特点）

Rust 是一种系统编程语言，它注重安全、速度和并发性。

Rust 的一些核心特点包括：

内存安全：Rust 通过所有权系统来保证内存安全，无需垃圾回收。
类型安全：Rust 的强类型系统有助于在编译时捕捉错误。
并发性：Rust 支持多线程和异步编程，提供了安全的并发编程模型。
性能：Rust 编译成机器码，执行速度接近 C 和 C++。
跨平台：Rust 可以在多种操作系统和架构上运行。

Rust 主要使用场景

Rust 的使用场景非常广泛，包括但不限于：

系统编程：操作系统、设备驱动等。
网络编程：构建高性能的网络服务和应用。
游戏开发：游戏引擎和游戏逻辑。
嵌入式系统：物联网设备和嵌入式设备编程。
WebAssembly：前端应用和浏览器插件。
区块链技术：智能合约和加密货币开发。

如何编写 WebAssembly

编写 WebAssembly 代码的基本步骤如下：

安装 Rust：首先需要安装 Rust 编译器和 Cargo（ Rust 的包管理器和构建工具）。

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

最终安装结果如下：

创建项目：使用 cargo new --lib my_wasm_project 创建一个新的 Rust 库项目。

cargo new --lib my_wasm_project
cd my_wasm_project

添加依赖：在 Cargo.toml 文件中添加 wasm-bindgen 依赖。

[package]
name = "my_wasm_project"
version = "0.1.0"
edition = "2021"

[dependencies]
wasm-bindgen = "0.2"

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

编写代码：在 src/lib.rs 文件中编写 Rust 代码。例如，可以编写一个简单的函数来计算两个数的和，并使用 wasm-bindgen 使其可以在 JavaScript 中调用。

   use wasm_bindgen::prelude::*;

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

构建 Wasm：使用 wasm-pack build --target web 命令构建 Wasm 模块。

## 添加 wasm-pack 
cargo install wasm-pack
## 构建
wasm-pack build --target web

可以得到如下结果:

集成到前端：将生成的 .wasm 文件集成到前端项目中，使用 JavaScript 调用 Wasm 模块中的函数。

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Rust Wasm Example</title>
    <script type="module">
        import init, { add } from './pkg/my_wasm_project.js';

            async function run() {
                await init();
                console.log(add(2, 3));
            }
           run();
           
    </script>
    </head>
    <body>
        <h1>Rust Wasm Example</h1>
    </body>
</html>