Bina projek pemasangan web pertama anda

Hei semua,

Siaran ini adalah sebahagian daripada siri meneroka WebAssembly. Lihat bahagian lain di sini [pautan ke bahagian lain siri].

Pernah mendengar tentang WebAssembly dan fikir ia terlalu rumit? Hari ini, anda akan membina projek WebAssembly yang mudah dari awal. Kami memastikan ia sangat asas: penjana kod warna heksadesimal rawak. Fikirkan ia sebagai "Hello, World!" daripada WebAssembly, tetapi dengan sentuhan berwarna-warni. Anda akan belajar menulis, menyusun dan menggunakan kod WebAssembly mudah dengan JavaScript untuk menjana warna rawak dalam penyemak imbas anda.

Menyediakan WebAssembly

Siri ini menggunakan contoh C dan C, jadi kami akan menggunakan Emscripten untuk menyusun C/C kepada WASM. Anda boleh menggunakan bahasa lain dengan penyusun masing-masing.

Penyediaan emskripten adalah mudah. Ikut arahan ini: https://www.php.cn/link/b1fb3726a5a825732f9a25e210426c4a

pengguna macOS boleh menggunakan Homebrew:

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

Pengguna Linux boleh mengikuti arahan ini: https://www.php.cn/link/cdcc686a434d09ed24e4b736d593858f

Selepas pemasangan, sahkan dengan:

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

Contoh Penambahan Ringkas

Sebelum membina penjana warna kami, mari buat aplikasi penambahan mudah untuk memahami aliran kerja WASM. Kami akan membinanya dalam JavaScript dahulu, kemudian menukarnya kepada WASM. Cipta 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>

Sekarang buat add.c:

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

Kompilkan kod C ke WASM:

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

Arahan ini:

• Menyusun add.c kepada JavaScript (add.js).
• Mengeksport fungsi addTwoNumbers untuk kegunaan JavaScript (garis bawah adalah sebahagian daripada arahan).
• Mengeksport fungsi masa jalan (ccall, cwrap) diperlukan untuk interaksi JavaScript.

Ini mencipta add.wasm (perduaan WASM) dan add.js (kod gam). Ubah suai index.html untuk memasukkan fungsi 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>

Jalankan ini menggunakan pelayan setempat (cth., python -m http.server, python3 -m http.server atau live-server). Masukkan dua nombor dan klik "Tambah" untuk melihat hasilnya.

JavaScript mengendalikan manipulasi DOM, manakala WASM (kod C) melakukan penambahan. Kod lengkap tersedia di sini [pautan ke kod].

Memahami Heksadesimal

Heksadesimal (asas-16) menggunakan 16 simbol (0-9, A-F, dengan A=10, dsb.). Kod heks enam digit mewakili warna (cth., #FF5733, #42A5F5). Ketahui lebih lanjut tentang warna perenambelasan di sini [pautan ke penjelasan].

Penjana Warna Rawak

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

Kompil:

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

Buat (atau ubah suai) HTML anda untuk menggunakan fungsi ini: [Kod HTML untuk memanggil fungsi WASM dan mengemas kini warna latar belakang].

Mengklik butang akan menukar warna latar belakang halaman.

Kod lengkap: [pautan ke kod]

Kesimpulan

Kami telah membina aplikasi WebAssembly yang mudah! Ini menunjukkan kuasa WebAssembly untuk membawa kod berprestasi tinggi ke web. Siaran akan datang akan meneroka aplikasi yang lebih maju. Nantikan!

Atas ialah kandungan terperinci Bina projek pemasangan web pertama anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!