建立您的第一個 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中文網其他相關文章！