身临WebAssembly，编码即快乐！

前端

2023-12-22 02:33:12

WebAssembly 的趣味入门：一步一步写代码

WebAssembly (Wasm) 作为一种创新的二进制指令集，让各类编程语言可以编译成高效、可移植的代码，并在 Web 上运行。

今天，我们将开启一段学习之旅，带你从零开始体验 WebAssembly 的编码魅力。为了让整个过程更生动有趣，我们准备了丰富的实例，并将其上传至 GitHub 仓库供你探索。

准备好了吗？让我们一起踏上旅程！

步骤 1：认识 WebAssembly 环境

WebAssembly 编码需要一个编译器。我们推荐使用 Emscripten，它支持多种语言，如 C/C++、Rust 等。
接下来，你需要一个文本编辑器，比如 VSCode 或 Atom。它能让你轻松编写代码。
最后，别忘了为你的 WebAssembly 代码找到一个“家”。推荐使用 GitHub Pages，它可以为你提供免费的静态网站托管服务。

步骤 2：编写一个简单的 WebAssembly 程序

首先，用文本编辑器创建一个名为 index.c 的文件。
在文件中输入以下代码：

#include <stdio.h>

int main() {
  printf("Hello, WebAssembly!\n");
  return 0;
}

接着，打开终端，将这个 C 代码编译成 WebAssembly：

emcc index.c -o index.wasm

然后，创建一个 HTML 文件 index.html，内容如下：

<!DOCTYPE html>
<html>
  <body>
    <script type="module">
      (async () => {
        const response = await fetch('index.wasm');
        const buffer = await response.arrayBuffer();
        const module = await WebAssembly.compile(buffer);
        const instance = new WebAssembly.Instance(module);
        instance.exports._start();
      })();
    </script>
  </body>
</html>