這篇文章主要介紹了怎么在WebAssembly中寫 “Hello World”，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了涿鹿免費建站歡迎大家使用！

通過這個分步教程，開始用人類可讀的文本編寫 WebAssembly。

WebAssembly 是一種字節(jié)碼格式，幾乎所有的瀏覽器 都可以將它編譯成其宿主操作系統(tǒng)的機器代碼。除了  JavaScript 和 WebGL 之外，WebAssembly 還滿足了將應(yīng)用移植到瀏覽器中以實現(xiàn)平臺獨立的需求。作為 C++ 和  Rust 的編譯目標(biāo)，WebAssembly 使 Web 瀏覽器能夠以接近原生的速度執(zhí)行代碼。

當(dāng)談?wù)?WebAssembly 應(yīng)用時，你必須區(qū)分三種狀態(tài)：

1. 源碼（如 C++ 或 Rust）： 你有一個用兼容語言編寫的應(yīng)用，你想把它在瀏覽器中執(zhí)行。

2. WebAssembly 字節(jié)碼： 你選擇 WebAssembly 字節(jié)碼作為編譯目標(biāo)。最后，你得到一個 .wasm 文件。

3. 機器碼（opcode）： 瀏覽器加載 .wasm 文件，并將其編譯成主機系統(tǒng)的相應(yīng)機器碼。

WebAssembly 還有一種文本格式，用人類可讀的文本表示二進制格式。為了簡單起見，我將其稱為 WASM-text。WASM-text 可以比作高級匯編語言。當(dāng)然，你不會基于 WASM-text 來編寫一個完整的應(yīng)用，但了解它的底層工作原理是很好的（特別是對于調(diào)試和性能優(yōu)化）。

本文將指導(dǎo)你在 WASM-text 中創(chuàng)建經(jīng)典的 “Hello World” 程序。

創(chuàng)建 .wat 文件

WASM-text 文件通常以 .wat 結(jié)尾。第一步創(chuàng)建一個名為 helloworld.wat 的空文本文件，用你最喜歡的文本編輯器打開它，然后粘貼進去：

(module    ;; 從 JavaScript 命名空間導(dǎo)入    (import  "console"  "log" (func  $log (param  i32  i32))) ;; 導(dǎo)入 log 函數(shù)    (import  "js"  "mem" (memory  1)) ;; 導(dǎo)入 1 頁 內(nèi)存（64kb）       ;; 我們的模塊的數(shù)據(jù)段    (data (i32.const 0) "Hello World from WebAssembly!")       ;; 函數(shù)聲明：導(dǎo)出 helloWorld()，無參數(shù)    (func (export  "helloWorld")        i32.const 0  ;; 傳遞偏移 0 到 log        i32.const 29  ;; 傳遞長度 29 到 log（示例文本的字符串長度）        call  $log        ))

WASM-text 格式是基于 S 表達(dá)式的。為了實現(xiàn)交互，JavaScript 函數(shù)用 import 語句導(dǎo)入，WebAssembly 函數(shù)用 export 語句導(dǎo)出。在這個例子中，從 console 模塊中導(dǎo)入 log 函數(shù)，它需要兩個類型為 i32 的參數(shù)作為輸入，以及一頁內(nèi)存（64KB）來存儲字符串。

字符串將被寫入偏移量 為 0 的數(shù)據(jù)段。數(shù)據(jù)段是你的內(nèi)存的疊加投影overlay，內(nèi)存是在 JavaScript 部分分配的。

函數(shù)用關(guān)鍵字 func 標(biāo)記。當(dāng)進入函數(shù)時，棧是空的。在調(diào)用另一個函數(shù)之前，函數(shù)參數(shù)會被壓入棧中（這里是偏移量和長度）（見 call $log）。當(dāng)一個函數(shù)返回一個 f32 類型時（例如），當(dāng)離開函數(shù)時，一個 f32 變量必須保留在棧中（但在本例中不是這樣）。

創(chuàng)建 .wasm 文件

WASM-text 和 WebAssembly 字節(jié)碼是 1:1 對應(yīng)的，這意味著你可以將 WASM-text 轉(zhuǎn)換成字節(jié)碼（反之亦然）。你已經(jīng)有了 WASM-text，現(xiàn)在將創(chuàng)建字節(jié)碼。

轉(zhuǎn)換可以通過 WebAssembly Binary Toolkit（WABT）來完成。從該鏈接克隆倉庫，并按照安裝說明進行安裝。

建立工具鏈后，打開控制臺并輸入以下內(nèi)容，將 WASM-text 轉(zhuǎn)換為字節(jié)碼：

wat2wasm helloworld.wat -o helloworld.wasm

你也可以用以下方法將字節(jié)碼轉(zhuǎn)換為 WASM-text：

wasm2wat helloworld.wasm -o helloworld_reverse.wat

一個從 .wasm 文件創(chuàng)建的 .wat 文件不包括任何函數(shù)或參數(shù)名稱。默認(rèn)情況下，WebAssembly 用它們的索引來識別函數(shù)和參數(shù)。

編譯 .wasm 文件

目前，WebAssembly 只與 JavaScript 共存，所以你必須編寫一個簡短的腳本來加載和編譯 .wasm 文件并進行函數(shù)調(diào)用。你還需要在 WebAssembly 模塊中定義你要導(dǎo)入的函數(shù)。

創(chuàng)建一個空的文本文件，并將其命名為 helloworld.html，然后打開你喜歡的文本編輯器并粘貼進去：

WebAssembly.Memory(...) 方法返回一個大小為 64KB 的內(nèi)存頁。函數(shù) consoleLogString 根據(jù)長度和偏移量從該內(nèi)存頁讀取一個字符串。這兩個對象作為 importObject 的一部分傳遞給你的 WebAssembly 模塊。

在你運行這個例子之前，你可能必須允許 Firefox 從這個目錄中訪問文件，在地址欄輸入 about:config，并將 privacy.file_unique_origin 設(shè)置為 true：

Firefox setting

注意： 這樣做會使你容易受到 CVE-2019-11730 安全問題的影響。

現(xiàn)在，在 Firefox 中打開 helloworld.html，按下 Ctrl+K 打開開發(fā)者控制臺。

Debugger output

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么在WebAssembly中寫 “Hello World””這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!