目錄
1.什么是Qt for WebAssembly？
1.1 什么是 WebAssembly？
1.2 WebAssembly 的優勢
1.3 什么是 Qt for WebAssembly？
1.4 Qt for WebAssembly 的特點
1.5 編譯過程
1.6 運行時環境
注意！！！注意！！！注意！！！Qt版本和Emscripten版本有對應關系，在官方文檔里就給出了最適合的版本，比如Qt5.15.2和Emscripten1.39.8版本合適
2.環境準備
2.1 安裝python3.9.0
2.2 安裝 Qt for WebAssembly
2.3 配置 Emscripten
3.編譯生成
3.1 創建和編譯項目
3.2 在 Qt Creator 中創建一個新的 Qt 項目
3.3 編譯項目，生成?.wasm?和?.js?文件
4.運行示例
4.1 編譯生成內容
4.2 運行項目
5.遺留問題
1.什么是Qt for WebAssembly？
Qt for WebAssembly?是 Qt 框架的一個模塊，它允許開發者將 Qt 應用程序編譯為 WebAssembly（Wasm）格式，從而可以在現代 Web 瀏覽器中運行。WebAssembly 是一種低級的二進制指令格式，旨在為 Web 提供高性能的執行環境。通過 Qt for WebAssembly，開發者可以使用 Qt 的強大功能（如 GUI、網絡、文件系統等）來構建跨平臺的 Web 應用程序。
1.1 什么是 WebAssembly？
-
WebAssembly（Wasm）?是一種基于堆棧的虛擬機的二進制指令格式，旨在為 Web 提供高性能的執行環境。
-
它允許開發者使用 C、C++、Rust 等語言編寫代碼，并將其編譯為 Wasm 格式，在瀏覽器中運行。
-
WebAssembly 的主要目標是實現接近原生的性能，同時保持與 Web 平臺的兼容性。
1.2 WebAssembly 的優勢
-
高性能：接近原生的執行速度。
-
跨平臺：可以在所有現代瀏覽器中運行。
-
安全性：運行在瀏覽器的沙盒環境中，確保安全性。
-
可移植性：支持多種編程語言（如 C、C++、Rust 等）。
1.3 什么是 Qt for WebAssembly？
-
Qt for WebAssembly?是 Qt 框架的一個模塊，它允許將 Qt 應用程序編譯為 WebAssembly 格式。
-
通過 Qt for WebAssembly，開發者可以使用 Qt 的強大功能（如 GUI、網絡、文件系統等）來構建跨平臺的 Web 應用程序。
-
它特別適合將現有的 Qt 桌面應用程序移植到 Web 平臺。
1.4 Qt for WebAssembly 的特點
-
跨平臺：可以在所有現代瀏覽器中運行。
-
高性能：利用 WebAssembly 的高性能特性。
-
豐富的功能：支持 Qt 的核心模塊（如 Qt Core、Qt GUI、Qt Widgets 等）。
-
易于移植：現有的 Qt 應用程序可以相對容易地移植到 WebAssembly。
1.5 編譯過程
-
使用 Emscripten 工具鏈將 Qt 應用程序的 C++ 代碼編譯為 WebAssembly 格式。
-
生成?
.wasm?文件（WebAssembly 二進制文件）和?.js?文件（JavaScript 膠水代碼）。 -
通過 HTML 文件加載和運行 WebAssembly 應用程序。
1.6 運行時環境
-
WebAssembly 應用程序運行在瀏覽器的沙盒環境中。
-
Qt for WebAssembly 使用 Emscripten 提供的 API 與瀏覽器進行交互（如 DOM 操作、文件系統訪問等）。
人話就是把某些qt實現的桌面程序編譯成wasm支持的web形式，但存在局限性。
感興趣的也可以自己去看看：QT官方5.15.2的說明文檔
注意！！！注意！！！注意！！！Qt版本和Emscripten版本有對應關系，在官方文檔里就給出了最適合的版本，比如Qt5.15.2和Emscripten1.39.8版本合適
不然你可能在后面都配置好了之后，發現編譯報錯
[Makefile:74: .\TestWebAssembly.js] Error 1
具體原因這個博主解釋了，主要是js的語法適配問題
接下來我主要描述怎么在windows版本下進行環境準備。
2.環境準備
2.1 安裝python3.9.0
2.2 安裝 Qt for WebAssembly
-
下載并安裝 Qt 安裝程序（Qt 5.15 或更高版本）。
-
在安裝過程中，選擇?
Qt for WebAssembly?模塊。
2.3 配置 Emscripten
-
下載并安裝 Emscripten 工具鏈。
先克隆Emscripten的sdk倉庫
git clone https://github.com/emscripten-core/emsdk.git
cd到剛剛克隆的文件夾下，進行安裝激活與查看版本，需要下載一些東西
.\emsdk install 1.39.8
.\emsdk activate 1.39.8
emcc --version
em++ --version
正確的情況下應該會看到：
2.配置 Emscripten 的環境變量。
自動利用腳本配置
.\emsdk_env.bat
手動配置
3.編譯生成
3.1 創建和編譯項目
1.在Qt中配置啟用webassembly編譯器
先要配置設備中的路徑，這個時候Qt自己會識別版本。
重啟QtCreator之后，就會在編譯器中看到有對應的版本的C和C++的編譯器
如果沒有的話，就自己添加
調試器的話，其實不支持調試，所以有沒有都無所謂，可以無視警告黃色感嘆號。
3.2 在 Qt Creator 中創建一個新的 Qt 項目
這個時候，可以勾選兩個編譯器，因為我使用的時候，切換到webassembly編譯器的時候，就無法加載出來pro中加入的文件了，可以先把項目運行好在切換成webassembly編譯器編譯就行。
選擇?WebAssembly?作為構建套件。
3.3 編譯項目，生成?.wasm?和?.js?文件
4.運行示例
4.1 編譯生成內容
TestWebAssembly/
├── TestWebAssembly.html ? ? ? # HTML 入口文件
├── TestWebAssembly.js ? ? ? ? # JavaScript 膠水代碼
├── TestWebAssembly.wasm ? ? ? # WebAssembly 二進制文件
├── TestWebAssembly.data ? ? ? # 靜態資源文件（可選）
├── TestWebAssembly.wasm.map ? # WebAssembly 源映射文件（可選）
├── TestWebAssembly.js.map ? ? # JavaScript 源映射文件（可選）
└── TestWebAssembly.worker.js ?# Web Worker 文件（可選）
4.2 運行項目
如果走到這一步，你直接打開了html的話，就會看到這樣的畫面
這就需要使用web服務器的方式加載才可以
4.2.1使用 Web 服務器（如 Python 內置 HTTP 服務器）運行生成的?.html?文件。
4.2.2在瀏覽器中打開?.html?文件，運行 WebAssembly 應用程序。
http://localhost:8000/TestWebAssembly.html5.遺留問題
出現了中文亂碼問題，尚未解決，看過一些教程，說是Qt自帶的三種字體并不支持中文，所以需要自己加載字體。
Qt 字體加載、圖標字體的使用 | 解決 Qt for WebAssembly 中文字體問題_嗶哩嗶哩_bilibili
希望知道怎么解決的朋友可以分享一下。
)
