返回

从零搭建 WebAssembly 应用：简明教程

闲谈

WebAssembly 是一种全新的编译目标，旨在为 Web 带来越快、更安全、更具可移植性的代码。它可以作为 JavaScript 的补充，用于编写高性能的 Web 应用程序。

本教程将指导您创建一个非常简单但完整的 WebAssembly 应用程序。此应用程序将在 Web 浏览器中运行，由 JavaScript 主机应用程序和 Rust 编写的 WebAssembly 字节码程序两部分组成。

您需要具备以下先决条件：

  • JavaScript 基础知识
  • Rust 基础知识
  • 一个文本编辑器
  • 一个终端或命令行窗口

按照以下步骤操作：

  1. 安装必要的软件

    • 安装 Rust 编译器
    • 安装 WebAssembly 二进制工具包 (wabt)

  2. 创建一个新的 Rust 项目

    • 打开终端或命令行窗口

    • 导航到您想要创建项目的目录

    • 运行以下命令：

      cargo new my_first_wasm_app

  3. 添加 WebAssembly 模块

    • 在 src 目录下创建一个名为 my_first_wasm_app.rs 的文件

    • 在该文件中添加以下代码：

      // 引入必要的库
extern crate wasm_bindgen;

// 定义一个 WebAssembly 模块
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

  4. 编译 WebAssembly 模块

    • 打开终端或命令行窗口

    • 导航到您的项目目录

    • 运行以下命令：

      cargo build --target wasm32-unknown-unknown

  5. 创建一个 JavaScript 主机应用程序

    • 在 src 目录下创建一个名为 index.html 的文件

    • 在该文件中添加以下代码：

      <!DOCTYPE html>
<html>
<head>

</head>
<body>
    <h1>Hello, WebAssembly!</h1>

    <script type="module">
        // 引入 WebAssembly 模块
        import * as wasm from './my_first_wasm_app.wasm';

        // 获取输入元素
        const input = document.getElementById('name');

        // 获取输出元素
        const output = document.getElementById('greeting');

        // 为输入元素添加事件监听器
        input.addEventListener('input', () => {
            // 获取输入框中的值
            const name = input.value;

            // 调用 WebAssembly 模块中的 greet 函数
            const greeting = wasm.greet(name);

            // 将结果显示在输出元素中
            output.textContent = greeting;
        });
    </script>
</body>
</html>

  6. 运行应用程序

    • 打开终端或命令行窗口

    • 导航到您的项目目录

    • 运行以下命令：

      cargo run

  7. 测试应用程序

    • 在浏览器中打开 index.html 文件
    • 输入您的名字并按回车键
    • 您应该会在输出元素中看到一个带有您名字的欢迎信息

恭喜您！您已经成功创建了一个简单的 WebAssembly 应用程序。