WebAssembly - 將WAT轉換為WASM

在上一章中，我們學習瞭如何編寫.wat 程式碼，也就是WebAssembly文字格式。WebAssembly文字格式不能直接在瀏覽器中執行，需要將其轉換為二進位制格式，即WASM，才能在瀏覽器中執行。

WAT到WASM

讓我們將.WAT轉換為.WASM。

我們將使用的程式碼如下：

(module 
   (func $add (param $a i32) (param $b i32) (result i32) 
      get_local $a 
      get_local $b 
      i32.add
   ) 
   (export "add" (func $add)) 
)

現在，訪問WebAssembly Studio，網址為https://webassembly.studio/。

點選連結後，您應該會看到如下介面：

點選“Empty Wat project”，然後點選底部的“Create”按鈕。

這將帶您進入一個空專案，如下所示：

點選`main.wat`，用您的程式碼替換現有程式碼，然後點選儲存按鈕。

儲存後，點選“build”按鈕將其轉換為.wasm：

如果構建成功，您應該會看到如下所示建立的.wasm檔案：

下載`main.wasm`檔案，並在您的.html檔案中使用它來檢視輸出，如下所示。

例如：add.html

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>WebAssembly Add Function</title>
   </head>
   <body>
      <script> 
         let sum; 
         fetch("main.wasm")
            .then(bytes => bytes.arrayBuffer()) 
            .then(mod => WebAssembly.compile(mod)) .then(module => {
            
            return new WebAssembly.Instance(module) 
         })
         .then(instance => {
            sum = instance.exports.add(10,40); 
            console.log("The sum of 10 and 40 = " +sum); 
         }); 
      </script>
   </body>
</html>

該函式`add`已匯出，如程式碼所示。傳遞的引數是兩個整數值10和40，它返回它們的和。

輸出

輸出顯示在瀏覽器中。

列印頁面