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

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

心靈之曲

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

原创

584人浏览过

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

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

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

第一步：安装Rust

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

<code class="bash">rustc --version</code>

登录后复制

第二步：创建Rust包

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

<code class="bash">cargo new rust-web-app --lib</code>

登录后复制

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

第三步：编译为WebAssembly

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

<code class="bash">cargo install wasm-pack</code>

登录后复制

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

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

<code class="toml">[package]
name = "rust-web-app"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"</code>

登录后复制

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

<code class="bash">cargo build</code>

登录后复制

第五步：编写Rust代码

易森网络企业版

如果您是新用户，请直接将本程序的所有文件上传在任一文件夹下，Rewrite 目录下放置了伪静态规则和筛选器，可将规则添加进IIS，即可正常使用，不用进行任何设置；(可修改图片等)默认的管理员用户名、密码和验证码都是：yeesen系统默认关闭，请上传后登陆后台点击“核心管理”里操作如下:进入“配置管理”中的&ld

查看详情

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

<code class="rust">use wasm_bindgen::prelude::*;

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

登录后复制

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

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

<code class="bash">wasm-pack build --target web</code>

登录后复制

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

第七步：创建HTML文件

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

<code class="html"><!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></code>

登录后复制

第八步：运行应用程序

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

最终项目结构:

<code>.
├── 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
    ...</code>

登录后复制

参考: