Construisez votre premier projet Webassembly

Hé les amis,

Cet article fait partie d'une série explorant WebAssembly. Découvrez les autres parties ici [lien vers d'autres parties de la série].

Vous avez déjà entendu parler de WebAssembly et pensé que c'était trop compliqué ? Aujourd’hui, vous allez créer un projet WebAssembly simple à partir de zéro. Nous restons super basiques : un générateur de code couleur hexadécimal aléatoire. Considérez-le comme le « Bonjour le monde ! » de WebAssembly, mais avec une touche colorée. Vous apprendrez à écrire, compiler et utiliser du code WebAssembly simple avec JavaScript pour générer des couleurs aléatoires dans votre navigateur.

Configuration de WebAssembly

Cette série utilise des exemples C et C, nous utiliserons donc Emscripten pour compiler C/C vers WASM. Vous pouvez utiliser d'autres langages avec leurs compilateurs respectifs.

La configuration d'Emscripten est simple. Suivez ces instructions : https://www.php.cn/link/b1fb3726a5a825732f9a25e210426c4a

Les utilisateurs de macOS peuvent utiliser Homebrew :

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

Les utilisateurs de Linux peuvent suivre ces instructions : https://www.php.cn/link/cdcc686a434d09ed24e4b736d593858f

Après l'installation, vérifiez avec :

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

Un exemple d'addition simple

Avant de créer notre générateur de couleurs, créons une application d'ajout simple pour comprendre le flux de travail WASM. Nous allons d'abord le construire en JavaScript, puis le convertir en WASM. Créer 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>

Créez maintenant add.c :

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

Compilez le code C dans WASM :

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

Cette commande :

• Compile add.c en JavaScript (add.js).
• Exporte la fonction addTwoNumbers pour une utilisation JavaScript (le trait de soulignement fait partie de la commande).
• Exporte les fonctions d'exécution (ccall, cwrap) nécessaires à l'interaction JavaScript.

Cela crée add.wasm (le binaire WASM) et add.js (le code de colle). Modifiez index.html pour inclure la fonctionnalité WASM :

<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>

Exécutez ceci à l'aide d'un serveur local (par exemple, python -m http.server, python3 -m http.server ou live-server). Entrez deux nombres et cliquez sur "Ajouter" pour voir le résultat.

JavaScript gère la manipulation du DOM, tandis que WASM (code C) effectue l'ajout. Le code complet est disponible ici [lien vers le code].

Comprendre l'hexadécimal

Hexadécimal (base 16) utilise 16 symboles (0-9, A-F, où A=10, etc.). Les codes hexadécimaux à six chiffres représentent les couleurs (par exemple, #FF5733, #42A5F5). Apprenez-en plus sur les couleurs hexadécimales ici [lien vers l'explication].

Le générateur de couleurs aléatoires

Créer 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; }

Compiler :

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

Créez (ou modifiez) votre HTML pour utiliser cette fonction : [Code HTML pour appeler la fonction WASM et mettre à jour la couleur de fond].

Cliquer sur un bouton changera la couleur d'arrière-plan de la page.

Code complet : [lien vers le code]

Conclusion

Nous avons construit une application WebAssembly simple ! Cela démontre la puissance de WebAssembly à apporter du code hautes performances au Web. Les prochains articles exploreront des applications plus avancées. Restez à l'écoute !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!