6 创建第一个WebAssembly项目
在上一篇中，我们讨论了如何配置开发环境以支持WebAssembly的开发。在本篇中，我们将带您一步步创建您的第一个WebAssembly项目，确保您能顺利开始编写和运行WebAssembly代码。
项目结构
首先，创建一个新的项目文件夹。假设我们将项目命名为 hello-wasm，在您的终端中运行以下命令：
mkdir hello-wasm
cd hello-wasm
在这个文件夹中，我们将创建两个主要的文件：
hello.wat：WebAssembly文本格式文件。index.html：一个简单的HTML文件，用于展示我们的WebAssembly模块。
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），您可以通过以下命令来编译：
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服务器，命令如下：
python3 -m http.server
这将在当前目录开启一个HTTP服务器，通常默认使用8000端口。您可以在浏览器中访问 http://localhost:8000/。
点击网页上的 “Run WebAssembly” 按钮，您应该会在页面上看到 WebAssembly says: 42 的输出。
结论
通过本篇教程，您成功创建了您的第一个WebAssembly项目，包括一个简单的WebAssembly模块和一个加载它的HTML页面。在下一篇中，我们将更深入地探讨WebAssembly的基本语法，特别是WebAssembly文本格式（WAT）的细节。希望您享受这个过程，期待您的继续探索！
