如何在 Web 中运行 Rust 应用程序-js教程-PHP中文网

如何在 Web 中运行 Rust 应用程序

心靈之曲

发布： 2025-01-26 16:42:01

原创

593人浏览过

在web中运行rust应用程序：循序渐进指南

如何在 Web 中运行 Rust 应用程序

本文将引导您完成在Web浏览器中运行Rust应用程序的步骤。我们将创建一个简单的Rust包，将其编译成WebAssembly (Wasm)，并使用JavaScript与之交互。

第一步：安装Rust

首先，您需要在系统上安装Rust。请参考官方Rust安装指南：https://www.php.cn/link/59186584039c18248c1c4244e7305050 (请替换为实际链接，如果需要)。安装完成后，运行以下命令验证安装：

rustc --version

登录后复制

第二步：创建Rust包

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

cargo new rust-web-app --lib

登录后复制

这将创建一个包含Cargo.toml和src/lib.rs文件的目录结构。Cargo.toml是项目的配置文件，lib.rs包含Rust代码。

第三步：编译为WebAssembly

为了在Web上运行Rust代码，我们需要将其编译为WebAssembly。为此，安装wasm-pack工具：

cargo install wasm-pack

登录后复制

第四步：启用Rust和JavaScript互操作

为了让Rust和JavaScript能够互相通信，我们需要使用wasm-bindgen crate。修改Cargo.toml文件，添加wasm-bindgen依赖：

[package]
name = "rust-web-app"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"

登录后复制

然后运行以下命令安装依赖：

cargo build

登录后复制

第五步：编写Rust代码

艺帆网络工作室网站源码1.7.5

艺帆网络工作室网站源码,是国庆后新一批新概念的网站源码,采用流行的Html5和JS组合流畅顺滑，界面清晰明朗，适合科技类企业和公司建站使用。如果你是想成为一家独特的设计公司，拥有独特的文化，追求品质，而非数量与规模。这种坚持一直贯穿于项目运作之中，从品牌建立、形象推广设计到品牌形象管理。那可以考虑使用这款艺帆网络工作室网站源码。这款源码中服务项目和团队程序需要在_template文件夹下的in

查看详情

在src/lib.rs中编写一个简单的函数，例如加法函数，并使用#[wasm_bindgen]属性将其暴露给JavaScript：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
    left + right
}

登录后复制

第六步：编译为WebAssembly并生成JavaScript绑定

使用wasm-pack编译Rust代码并生成JavaScript绑定：

wasm-pack build --target web

登录后复制

这将在pkg目录下生成必要的WebAssembly文件和JavaScript绑定代码。

第七步：创建HTML文件

创建一个index.html文件，引入生成的JavaScript文件并调用Rust函数：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello Rust</title>
</head>
<body>
    <script type="module">
        import init, { add } from "./pkg/rust_web_app.js";
        init().then(() => {
            const sum = add(5, 10);
            console.log("5 + 10 =", sum);
        });
    </script>
</body>
</html>

登录后复制

第八步：运行应用程序

使用本地Web服务器（例如，python -m http.server）提供index.html文件。在浏览器中打开index.html，并在浏览器控制台中查看结果（5 + 10 = 15）。

最终项目结构:

.
├── Cargo.lock
├── Cargo.toml
├── index.html
├── pkg
│   ├── package.json
│   ├── rust_web_app.d.ts
│   ├── rust_web_app.js
│   ├── rust_web_app_bg.wasm
│   └── rust_web_app_bg.wasm.d.ts
├── src
│   └── lib.rs
└── target
    ...

登录后复制

参考: