1 什麼是WebAssembly？
WebAssembly是一種新的編碼方式，可以在現代的網絡瀏覽器中運行，它是一種低級的類彙編語言，具有緊湊的二進制格式，可以接近原生的性能運行，併爲諸如C/C++等語言提供一個編譯目標，以便它們可以在Web上運行。它也被設計爲可以與JavaScript共存，允許兩者一起工作。
2 什麼是Emscripten？
Emscripten是一個開源的編譯器，可以將C/C++的代碼編譯後高效運行在現代瀏覽器上面。Emscripten的底層是基於 LLVM 編譯器。
3 安裝步驟
- 先安裝Qt5.15.1並選中MinGW 8.1.0 64-bit和WebAssembly（這個是Qt編譯好的WebAssembly桌面庫，選了這個就不用編譯源代碼了，可以直接用）；
- 由於Qt5.15.1中WebAssembly是由emsdk 1.39.7版本編譯的，所以我們也要安裝emsdk 1.39.7，使編譯器保持一致，這樣才能正常使用；
- 將emsdk目錄下的.emscripten文件複製到用戶目錄並用絕對路徑替換裏面的路徑，這樣QtCreator才能正確識別emsdk工具鏈；
- 配置MinGW環境變量，使mingw32-make.exe可識別；
- 設置QtCreator的WebAssembly套件編譯器爲Emscripten Compiler。
3.1 安裝Qt5.15.1
下載在線安裝工具，qt-unified-windows-x86-3.2.3-online，至少選中紅框中的兩項進行安裝：
3.2 安裝emsdk
- 獲取源碼
git clone https://github.com/emscripten-core/emsdk.git
![]()
- 進入emsdk目錄執行
emsdk install 1.39.7
![]()
- 安裝完成後執行
emsdk activate --embedded 1.39.7
![]()
3.3 使用前配置
- 將emsdk目錄下的
.emscripten文件複製到C:\Users\Administrator目錄下（即用戶目錄），並修改爲：
import os
NODE_JS = 'd:/emsdk/node/12.18.1_64bit/bin/node.exe'
PYTHON = 'd:/emsdk/python/3.7.4-pywin32_64bit/python.exe'
JAVA = 'd:/emsdk/java/8.152_64bit/bin/java.exe'
LLVM_ROOT = 'd:/emsdk/upstream/bin'
BINARYEN_ROOT = 'd:/emsdk/upstream'
EMSCRIPTEN_ROOT = 'd:/emsdk/upstream/emscripten'
TEMP_DIR = 'd:/emsdk/tmp'
COMPILER_ENGINE = NODE_JS
JS_ENGINES = [NODE_JS]
這裏主要是將地址改爲實際的地址，用絕對路徑替換，QtCreator會根據這個文件識別emsdk的配置信息，不然識別不到em編譯器。
- 將D:\Qt\Tools\mingw810_64\bin目錄加入環境變量，有必要，Qt for WebAssembly構建過程會使用到mingw32-make工具，不配置的話無法正常構建；
- 打開QtCreator配置下，我的在D:\Qt\Tools\QtCreator\bin\qtcreator.exe
![]()
4 簡單使用
- 啓動QtCreator，隨便打開一個項目：
![]()
- 選擇構建套件：
![]()
- 構建項目：
![]()
- 構建完成後，生成如下文件：
![]()
- 在構建目錄執行指令
D:\emsdk\upstream\emscripten\emrun.bat --browser=firefox application.html在瀏覽器上運行一下：
![]()
5 有何不足？
看到上面那個圖沒有，我想輸入中文，但是無法輸入，算是支持的不夠好吧，而且無法識別本地硬盤。多線程和數據庫貌似也不行，這個我並未測試。
- 當前支持的Qt模塊
- qtbase
- qtdeclarative
- qtquickcontrols2
- qtwebsockets
- qtsvg
- qtcharts
- qtmqtt
- 當前不支持的Qt模塊：
- qtmultimedia
- qtwebview
其它模塊未測試，可能行也可能不行。
6 離線包下載
鑑於安裝過程過於緩慢，我將離線包上傳了一份，點擊下載 提取碼：i5mj