2024-08-15发表2024-08-16更新软件开发 / WebAssembly5 分钟读完 (大约787个字)0次访问

6 创建第一个WebAssembly项目

在上一篇中，我们讨论了如何配置开发环境以支持WebAssembly的开发。在本篇中，我们将带您一步步创建您的第一个WebAssembly项目，确保您能顺利开始编写和运行WebAssembly代码。

项目结构

首先，创建一个新的项目文件夹。假设我们将项目命名为 hello-wasm，在您的终端中运行以下命令：

1 2	mkdir hello-wasm cd hello-wasm

在这个文件夹中，我们将创建两个主要的文件：

hello.wat：WebAssembly文本格式文件。
index.html：一个简单的HTML文件，用于展示我们的WebAssembly模块。

1	touch hello.wat index.html

创建WebAssembly模块

接下来，我们在 hello.wat 文件中编写我们的WebAssembly代码。打开 hello.wat 文件，并输入以下内容：

(module
  (export "sayHello" (func $sayHello))
  (func $sayHello (result i32)
    (i32.const 42) ;; 这个函数返回42
  )
)

这个模块定义了一个简单的函数 sayHello，它返回一个整数 42。这里我们使用了WebAssembly文本格式（WAT），它更易于人类阅读和书写。

编译WebAssembly模块

为了将 hello.wat 文件编译为二进制的WebAssembly格式（.wasm），我们需要使用 wat2wasm 工具。确保您已经安装了 WebAssembly Binary Toolkit（WABT），您可以通过以下命令来编译：

1	wat2wasm hello.wat -o hello.wasm

完成后，您将在项目目录中看到一个新的文件 hello.wasm。

创建HTML界面

现在，我们需要在 index.html 文件中加载和运行这个WebAssembly模块。打开 index.html 文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello WebAssembly</title>
</head>
<body>
    <h1>Hello WebAssembly</h1>
    <button id="runBtn">Run WebAssembly</button>
    <p id="output"></p>

    <script>
        // 加载WebAssembly模块
        const runBtn = document.getElementById('runBtn');
        const output = document.getElementById('output');

        WebAssembly.instantiateStreaming(fetch('hello.wasm'))
            .then(obj => {
                const sayHello = obj.instance.exports.sayHello;
                
                runBtn.onclick = () => {
                    const result = sayHello();
                    output.textContent = `WebAssembly says: ${result}`;
                };
            })
            .catch(err => {
                console.error('Error loading WASM:', err);
            });
    </script>
</body>
</html>

在这里，我们设置了一个简单的HTML界面，包含一个按钮用于触发WebAssembly模块的执行，并在点击后将结果展示在页面上。

运行项目

现在，您已经完成了WebAssembly模块的创建和HTML界面的设置。接下来，我们需要使用一个HTTP服务器来运行这个项目。为了简单起见，您可以使用 python 提供的HTTP服务器，命令如下：

1	python3 -m http.server

这将在当前目录开启一个HTTP服务器，通常默认使用8000端口。您可以在浏览器中访问 http://localhost:8000/。

点击网页上的 “Run WebAssembly” 按钮，您应该会在页面上看到 WebAssembly says: 42 的输出。

结论

通过本篇教程，您成功创建了您的第一个WebAssembly项目，包括一个简单的WebAssembly模块和一个加载它的HTML页面。在下一篇中，我们将更深入地探讨WebAssembly的基本语法，特别是WebAssembly文本格式（WAT）的细节。希望您享受这个过程，期待您的继续探索！

6 创建第一个WebAssembly项目

https://zglg.work/webassembly-zero/6/

作者

IT教程网(郭震)

发布于

2024-08-15

更新于

2024-08-16

许可协议

#WebAssembly

6 创建第一个WebAssembly项目

项目结构

创建WebAssembly模块

编译WebAssembly模块

创建HTML界面

运行项目

结论

作者

发布于

更新于

许可协议

分享转发

学习下节

复习上节

交流

打卡评论