-
測試平台: Windows 10, Ubuntu 20.04 Desktop
-
Qt版本: Qt 5.15.0
-
Emscripten版本: 1.39.18
安裝Qt WebAssembly套件
對於Qt 5.13+, 使用Qt online installer安裝Qt時勾選WebAssembly套件即可. 如果已安裝Qt, 也可以在Qt maintenance tool中安裝. 以Windows為例:
安裝Emscripten SDK
首先確保已配置好Python環境. 可以選擇安裝CMake和Java(我不確定這是否必須的, 測試時電腦上本來就有Java和CMake). 以Ubuntu為例:
# Install Python
sudo apt-get install python2.7
# Install CMake (optional, only needed for tests and building Binaryen)
sudo apt-get install cmake
# Install Java (optional, only needed for Closure Compiler minification)
sudo apt-get install default-jre
從emsdk GitHub page下載Emscripten SDK python腳本. 可以git clone或者直接下載zip文件並解壓. 下載得到的emsdk/文件夾可以放在任何位置, 之后Emscripten SDK會安裝在里面.
進入emsdk/文件夾. 在Ubuntu上運行:
./emsdk install latest
./emsdk activate latest
在Windows上:
emsdk install latest
emsdk activate latest
我測試時最新版本是1.39.18. 也可以按照Qt for WebAssembly - Qt Wiki給出的版本匹配表安裝, 但大體上是向后兼容的.
| Qt Version | Singlethreading | Multithreading | Additional info |
|---|---|---|---|
| 5.12 | 1.38.16 | NA | |
| 5.13 | 1.38.27 | 1.38.30 | |
| 5.14 | 1.38.27 | 1.38.30 | 詳情見Qt for WebAssembly - Qt Wiki |
| 5.15 | 1.39.8 | 暫定; 不再支持1.38.x/fasctcomp |
更多Emscripten SDK安裝細節見Download and install - Emscripten Doc.
Windows下(應該)還需要安裝Sed, 我安裝了但不確定是否是必要的. 見sed for Windows.
為Qt配置WebAssembly Kit
這一步按照官方文檔應該配置環境變量就行了, 但我從來沒成功過, 甚至不同的文檔說法還不一樣.
Qt Creator會檢測主文件夾(對於linux是~, 對於Windows是C:\Users\you)下的.emscripten文件, 這是一個描述emsdk工具鏈的文件. 上一步安裝完后此文件會出現在emsdk/中. 將它復制到主文件夾即可.
如果不想配置環境變量, 可以手動修改.emscripten文件. 例如, 如果原本的文件內容為
import os
emsdk_path = os.path.dirname(os.environ.get('EM_CONFIG')).replace('\\', '/')
NODE_JS = emsdk_path + '/node/12.18.1_64bit/bin/node.exe'
...
刪去一行
emsdk_path = os.path.dirname(os.environ.get('EM_CONFIG')).replace('\\', '/')
並將其下的emsdk_path修改為emsdk\安裝文件夾的絕對路徑.
之后打開Qt Creator - Kits - Compiler, 並點擊Re-detect. 此時Qt Creator應當自動檢測到了Emscripten Compiler. 以Ubuntu為例:
在Kits板塊內選擇好Compiler, 點擊確定, WebAssembly的配置到這里就結束了(下圖是以前在Qt 5.14.2上配置的截圖).
測試
在Windows上編譯一個項目需要1~2分鍾.
編譯生成了如下文件, 可以看出*.wasm文件還是很大的. 似乎可以用gzip將之壓縮到一半, 但我尚未嘗試.
把這些文件上傳到服務器就可以在任意一個(主流)瀏覽器上訪問了, 其中Firefox效果最好. 例如如果服務器上啟用了apache, 上傳到/var/www/html即可. 沒有服務器的話也可以上傳到自己的Github Page上.
我在GitHub Page上上傳了MineField和2048, 需要的可以點擊嘗試.
不過目前Qt for WebAssembly還很不完善, 也就可以圖一樂呵.
參考
Download and install - Emscripten Doc
Qt for WebAssembly入門 - Qt Blog