Erstellen Sie Ihr erstes Webassembly-Projekt

Hey Leute,

Dieser Beitrag ist Teil einer Serie über WebAssembly. Schauen Sie sich die anderen Teile hier an [Link zu anderen Teilen der Serie].

Haben Sie jemals von WebAssembly gehört und dachten, es sei zu kompliziert? Heute erstellen Sie ein einfaches WebAssembly-Projekt von Grund auf. Wir halten es ganz einfach: einen zufälligen hexadezimalen Farbcodegenerator. Betrachten Sie es als „Hallo Welt!“ von WebAssembly, aber mit einer farbenfrohen Note. Sie lernen, einfachen WebAssembly-Code mit JavaScript zu schreiben, zu kompilieren und zu verwenden, um zufällige Farben in Ihrem Browser zu generieren.

WebAssembly einrichten

Diese Serie verwendet C- und C-Beispiele, daher verwenden wir Emscripten, um C/C in WASM zu kompilieren. Sie können andere Sprachen mit ihren jeweiligen Compilern verwenden.

Die Einrichtung von Emscripten ist einfach. Befolgen Sie diese Anweisungen: https://www.php.cn/link/b1fb3726a5a825732f9a25e210426c4a

MacOS-Benutzer können Homebrew verwenden:

<code class="language-bash">brew install emscripten</code>

Linux-Benutzer können diesen Anweisungen folgen: https://www.php.cn/link/cdcc686a434d09ed24e4b736d593858f

Überprüfen Sie nach der Installation mit:

<code class="language-bash">emcc -v</code>

Ein einfaches Additionsbeispiel

Bevor wir unseren Farbgenerator erstellen, erstellen wir eine einfache Additionsanwendung, um den WASM-Workflow zu verstehen. Wir erstellen es zunächst in JavaScript und konvertieren es dann in WASM. Erstellen Sie index.html:

<code class="language-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></code>

Jetzt erstellen Sie add.c:

<code class="language-c">// add.c
int addTwoNumbers(int num1, int num2) {
    return num1 + num2;
}</code>

Kompilieren Sie den C-Code zu WASM:

<code class="language-bash">emcc add.c -o add.js -s EXPORTED_FUNCTIONS="['_addTwoNumbers']" -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"</code>

Dieser Befehl:

• Kompiliert add.c zu JavaScript (add.js).
• Exportiert die Funktion addTwoNumbers für die Verwendung in JavaScript (der Unterstrich ist Teil des Befehls).
• Exportiert Laufzeitfunktionen (ccall, cwrap), die für die JavaScript-Interaktion benötigt werden.

Dadurch werden add.wasm (die WASM-Binärdatei) und add.js (der Klebercode) erstellt. Ändern Sie index.html, um die WASM-Funktionalität einzuschließen:

<code class="language-html"><!-- 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></code>

Führen Sie dies mit einem lokalen Server aus (z. B. python -m http.server, python3 -m http.server oder live-server). Geben Sie zwei Zahlen ein und klicken Sie auf „Hinzufügen“, um das Ergebnis anzuzeigen.

JavaScript übernimmt die DOM-Manipulation, während WASM (C-Code) die Addition durchführt. Der vollständige Code ist hier verfügbar [Link zum Code].

Hexadezimalzahlen verstehen

Hexadezimal (Basis 16) verwendet 16 Symbole (0-9, A-F, wobei A=10 usw.). Sechsstellige Hexadezimalcodes stellen Farben dar (z. B. #FF5733, #42A5F5). Erfahren Sie hier mehr über hexadezimale Farben [Link zur Erklärung].

Der Zufallsfarbgenerator

Erstellen Sie random_color.c:

<code class="language-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="language-bash">emcc random_color.c -o random_color.js -s EXPORTED_FUNCTIONS="['_generateRandomHexColor']" -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap', 'UTF8ToString']"</code>

'; 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; }

Kompilieren:

<code class="language-bash">brew install emscripten</code>

Erstellen (oder ändern) Sie Ihren HTML-Code, um diese Funktion zu verwenden: [HTML-Code zum Aufrufen der WASM-Funktion und Aktualisieren der Hintergrundfarbe].

Durch Klicken auf eine Schaltfläche wird die Hintergrundfarbe der Seite geändert.

Vollständiger Code: [Link zum Code]

Fazit

Wir haben eine einfache WebAssembly-Anwendung erstellt! Dies zeigt die Leistungsfähigkeit von WebAssembly, leistungsstarken Code ins Web zu bringen. Zukünftige Beiträge werden sich mit fortgeschritteneren Anwendungen befassen. Bleiben Sie dran!

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihr erstes Webassembly-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!