如何將C++程式與HTML頁面連結？

WebAssembly (Wasm) 是一種並行指導設計，它使C++等高階執行語言能夠在 Web 瀏覽器中執行，用於將C++應用程式與HTML頁面連線。透過 WebAssembly，開發人員可以建立具有C++功能的 Web 應用程式，實現C++程式碼與HTML和JavaScript的無縫整合。以下是如何使用WebAssembly將C++程式與HTML頁面連線的分步教程。

安裝所需的工具

在開始之前，您需要設定以下工具：

  • 如果您還沒有C++編譯器，請考慮安裝GCC（GNU編譯器集合）或Visual C++。

  • Emscripten SDK：Emscripten是一個將C和C++應用程式轉換為WebAssembly的工具鏈。從其官方網站（https://emscripten.org）下載並安裝Emscripten SDK。

編寫C++程式碼

像編寫普通的C++應用程式一樣編寫您的C++程式碼。請記住，程式環境不允許某些功能，例如直接硬體訪問和檔案I/O。專注於計算過程和其他不需要作業系統特定功能的任務。

例如，讓我們建立一個簡單的C++函式來計算數字的階乘：

int factorial(int n) {
   if (n == 0 || n == 1) 
      return 1;
   Else
      return n * factorial(n - 1);
}

將C++程式碼編譯為WebAssembly

要將C++程式碼轉換為WebAssembly模組，請使用Emscripten SDK。開啟終端或命令提示符，並導航到包含C++程式碼的目錄。

使用以下命令將C++程式碼編譯為WebAssembly：

emcc factorial.cpp -o factorial.js -s WASM=1

此命令使用 -s WASM=1 標誌指示Emscripten將“factorial.cpp”轉換為啟用WebAssembly輸出的“factorial.js”。

建立HTML頁面

建立一個HTML頁面來託管您的WebAssembly模組。此頁面將與C++函式通訊並載入WebAssembly模組。

示例

<!DOCTYPE html> 
<html>
<head>
   <title>WebAssembly C++ Example</title> 
   <script src="factorial.js"></script> 
</head>
<body>
   <h1>WebAssembly C++ Example</h1>
   <script>
      Module.onRuntimeInitialized = function () { 
         const num = 5; 
         const result = Module._factorial(num); 
         console.log(`Factorial of ${num} is ${result}`);
      };
   </script> 
</body>
</html>

上面的HTML檔案包含編譯後的WebAssembly模組“factorial.js”指令碼。`

廣告
© . All rights reserved.