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