构建您的第一个 WebAssembly 项目

大家好，

这篇文章是探索 WebAssembly 系列的一部分。 在这里查看其他部分[链接到该系列的其他部分]。

听说过 WebAssembly 并认为它太复杂了吗？ 今天，您将从头开始构建一个简单的 WebAssembly 项目。 我们保持它的超级基础：随机的十六进制颜色代码生成器。 将其视为“你好，世界！” WebAssembly 的一部分，但具有丰富多彩的变化。 您将学习使用 JavaScript 编写、编译和使用简单的 WebAssembly 代码，以在浏览器中生成随机颜色。

设置 WebAssembly

本系列使用 C 和 C 示例，因此我们将使用 Emscripten 将 C/C 编译为 WASM。 您可以使用其他语言及其各自的编译器。

Emscripten 设置很简单。请按照以下说明操作：https://www.php.cn/link/b1fb3726a5a825732f9a25e210426c4a

macOS 用户可以使用 Homebrew：

brew install emscripten

Linux 用户可以按照以下说明操作：https://www.php.cn/link/cdcc686a434d09ed24e4b736d593858f

安装后，验证：

emcc -v

一个简单的加法示例

在构建我们的颜色生成器之前，让我们创建一个简单的加法应用程序来了解 WASM 工作流程。我们将首先用 JavaScript 构建它，然后将其转换为 WASM。创建index.html：

<!-- index.html -->
<input type="number" id="num1"> + <input type="number" id="num2"> = <p id="result"></p>
<button onclick="addNumbers()">Add</button>
<script src="add.js"></script>

现在创建add.c:

// add.c
int addTwoNumbers(int num1, int num2) {
    return num1 + num2;
}

将 C 代码编译为 WASM：

emcc add.c -o add.js -s EXPORTED_FUNCTIONS="['_addTwoNumbers']" -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"

此命令：

• 将 add.c 编译为 JavaScript (add.js)。
• 导出 addTwoNumbers 函数以供 JavaScript 使用（下划线是命令的一部分）。
• 导出 JavaScript 交互所需的运行时函数 (ccall, cwrap)。

这将创建 add.wasm （WASM 二进制文件）和 add.js （粘合代码）。 修改 index.html 以包含 WASM 功能：

<!-- index.html (modified) -->
<input type="number" id="num1"> + <input type="number" id="num2"> = <p id="result"></p>
<button onclick="addNumbers()">Add</button>
<script>
  const Module = {
    onRuntimeInitialized: () => {
      const addTwoNumbers = Module.cwrap('addTwoNumbers', 'number', ['number', 'number']);
      function addNumbers() {
        const num1 = parseInt(document.getElementById('num1').value);
        const num2 = parseInt(document.getElementById('num2').value);
        document.getElementById('result').innerText = addTwoNumbers(num1, num2);
      }
    }
  };
</script>
<script src="add.js"></script>

使用本地服务器运行此程序（例如，python -m http.server、python3 -m http.server 或 live-server）。 输入两个数字，然后单击“添加”即可查看结果。

JavaScript 处理 DOM 操作，而 WASM（C 代码）执行加法。 完整的代码可以在这里找到[代码链接]。

理解十六进制

十六进制（以 16 为底）使用 16 个符号（0-9、A-F，其中 A=10 等）。 六位十六进制代码代表颜色（例如，#FF5733、#42A5F5）。 在此处了解有关十六进制颜色的更多信息[解释链接]。

随机颜色生成器

创建random_color.c:

// random_color.c
#include <stdlib.h>
#include <time.h>

char* intToHex(int num) {
    static char hexStr[3];
    const char hexDigits[] = "0123456789ABCDEF";
    hexStr[0] = hexDigits[(num >> 4) & 0xF];
    hexStr[1] = hexDigits[num & 0xF];
    hexStr[2] = '<pre class="brush:php;toolbar:false"><code class="bash">emcc random_color.c -o random_color.js -s EXPORTED_FUNCTIONS="['_generateRandomHexColor']" -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap', 'UTF8ToString']"

'; return hexStr; } char* generateRandomHexColor() { static char color[8]; srand(time(NULL)); color[0] = '#'; char* r = intToHex(rand() % 256); color[1] = r[0]; color[2] = r[1]; char* g = intToHex(rand() % 256); color[3] = g[0]; color[4] = g[1]; char* b = intToHex(rand() % 256); color[5] = b[0]; color[6] = b[1]; color[7] = '<🎝🎝🎝>'; return color; }

编译：

brew install emscripten

创建（或修改）HTML 以使用此函数：[调用 WASM 函数并更新背景颜色的 HTML 代码]。

单击按钮将更改页面的背景颜色。

完整代码：[代码链接]

结论

我们构建了一个简单的 WebAssembly 应用程序！这证明了 WebAssembly 将高性能代码引入网络的能力。 未来的帖子将探索更高级的应用程序。请继续关注！

以上是构建您的第一个 WebAssembly 项目的详细内容。更多信息请关注PHP中文网其他相关文章！