一、前言
從Qt5.14開始，官方的在線安裝提供了qt for webassembly構建套件，這對很多小白來說絕對是個好消息，也絕對是個好東西，好消息是不用再去交叉編譯自己生成qt for webassembly的qt庫，在線安裝版本直接就給你安裝好，很多小白就困在如何交叉編譯qt for webassembly的qt庫上了，環境簡直是弄哭了，望而卻步；好東西是你可以直接將你現有的qt程序直接編譯成wasm文件然后直接網頁運行，注意這里不是說activex的形式在IE中運行，而是直接各種支持wasm的瀏覽器上直接運行，比如谷歌瀏覽器、火狐瀏覽器、edge瀏覽器等，反正主流的瀏覽器都支持，是不是很牛逼，大致的原理就是借助emsdk中的emscripten編譯器將qt的程序直接靜態編譯生成wasm文件，然后同時生成對應的js文件和html文件，js文件負責加載wasm文件進行編譯使用canvs繪制程序。理論上c++程序執行效率要比js高，個人體驗下來也是效率蠻高，最激動的就是一行代碼不用修改，直接就可以編譯成網頁程序。
WebAssembly介紹：
- WebAssembly是一種可以使用非JavaScript編程語言編寫代碼並且能在瀏覽器上運行的技術方案。
- WebAssembly有一套完整的語義，實際上wasm是體積小且加載快的二進制格式，其目標就是充分發揮硬件能力以達到原生執行效率。
- WebAssembly運行在一個沙箱化的執行環境中，甚至可以在現有的JavaScript虛擬機中實現。在web環境中，WebAssembly將會嚴格遵守同源策略以及瀏覽器安全策略。
- WebAssembly設計了一個非常規整的文本格式用來、調試、測試、實驗、優化、學習、教學或者編寫程序。可以以這種文本格式在web頁面上查看wasm模塊的源碼。
- WebAssembly在web中被設計成無版本、特性可測試、向后兼容的。WebAssembly可以被JavaScript調用，進入JavaScript上下文，也可以像WebAPI一樣調用瀏覽器的功能。當然，WebAssembly不僅可以運行在瀏覽器上，也可以運行在非web環境下。
- qt+widget編譯的程序網頁地址：
https://feiyangqingyun.gitee.io/qwidgetdemo/ - qt+quick編譯的程序網頁地址：
https://feiyangqingyun.gitee.io/qwidgetdemo/gallery.html - WebAssembly中文網
https://www.wasm.com.cn/ - qt for webassembly官網介紹
https://doc.qt.io/qt-5/wasm.html
二、搭建步驟
（一）、安裝Qt集成開發環境
從Qt5.15開始官方不再提供離線安裝包，只提供源碼包自行編譯或者在線安裝，在線安裝的時候需要輸入賬號信息登錄才能在線下載選擇的Qt版本和構建套件及其他工具，慢慢的各位Qt開發者要習慣這種方式，要么自己熟悉編譯流程自行編譯，對應大部分初學者來說一個是沒有這個必要還一個是太難了，建議放棄這種方式，所以從現在開始就慢慢的要習慣在線安裝方式，官方提供了在線安裝的程序，雙擊即可運行，相信90%的Qt開發者都使用過，這里直接略過，只需要在選擇安裝的構建套件的時候記得勾選WebAssembly構建套件就行，這樣已經很方便了，之前都是需要自己編譯呢。
安裝好以后如果勾選了mingw版本的Qt構建套件，則可以自行測試hello跑起來，同時你也會發現qt for webassembly這個構建條件是不可用的，別急，那是因為現在你只安裝了qt for webassembly的qt的庫，而並沒有找到需要的編譯器emscripten。
（二）、安裝emsdk編譯器
任何編程語言開發環境，都離不開編譯器，需要用對應的編譯器將代碼編譯成對應的可執行文件，Qt是一個兼容了N種編譯器的通用代碼庫，你使用何種編譯器則調用對應的Qt庫然后再編譯生成對應的程序，qt for webassembly就需要借助emsdk中的編譯器emscripten來編譯，而不是使用msvc、mingw、gcc等，所以需要單獨安裝emsdk編譯器。
1、常規安裝辦法
- 前提：電腦安裝有git環境，能從github下載項目，安裝有python環境，比如python3.7.4，如果不會玩git命令行請自行百度。
- 第一步：雙擊python-3.7.4-amd64.exe，安裝python開發環境，記得勾選添加環境變量。
- 第二步：獲取源碼，打開git命令行工具，輸入 git clone https://github.com/emscripten-core/emsdk.git ，等待下載完成，一般1-2分鍾就下載完成。
- 第三步：打開cmd工具，進入到emsdk目錄，執行 emsdk install 1.39.7 安裝emsdk編譯器（Qt5.15對應的是1.39.7版本，而不是1.39.8，之前下載的1.39.8用下來每次編譯都有警告提示版本不一致說是要1.39.7）。這個下載需要點時間請耐心等待，我電腦大概13分鍾，具體看網速。
- 第四步：安裝完成后繼續在當前的cmd命令行窗口執行 emsdk activate --embedded 1.39.7 激活sdk。
- 第五步：激活成功以后，將emsdk目錄下的.emscripten文件復制到C:\Users\Administrator目錄下（即用戶目錄），Qt for webass構建套件編譯的時候會去這里找編譯器和各種編譯需要的變量。
- 第六步：用記事本打開.emscripten，將 emsdk_path = os.path.dirname(os.environ.get('EM_CONFIG')).replace('\', '/') 改成emsdk目錄的絕對路徑，比如 emsdk_path = 'H:/github/emsdk'，如果運行有問題則全部改成絕對路徑。
- 第七步：打開QtCreator，配置Qt for WebAssembly構建套件，此時可以看到編譯器中能夠識別到所需的em編譯器。
- 第八步：編譯好以后如果彈出的是IE瀏覽器則復制地址拷貝到谷歌瀏覽器或者edge或者火狐瀏覽器運行，目前IE瀏覽器不支持WebAssembly。
- 第九步：默認采用的是靜態編譯，意味着可以脫離Qt環境運行，.wasm文件比較大因為靜態集成了Qt的運行庫。除了編譯運行以外，還可以直接發布到有ngix或者apche環境的站點，直接可以運行。他就類似於PHP需要站點環境支持才能運行。
2、小白懶人辦法
常規的辦法是萬能的，包括選用其他版本的編譯器等，但是大部分的初學者其實還沒有git環境和python環境呢，怎破，此時非常想體驗一把將qt程序編譯到網頁運行的想法超級強烈，馬上安排懶人辦法，注意此辦法針對的是Qt5.15.2版本，本人特意將下載好的編譯器整個文件夾中各種無關的文件全部刪除。
emsdk地址：https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取碼：o05q 名稱：emsdk.zip
-
第一步：將下載好的emsdk壓縮包解壓到目錄，為了方便統一管理，我這里放在C:/Qt。
-
第二步：將emsdk目錄下的.emscripten文件復制到C:\Users\Administrator目錄下（即用戶目錄），Qt for webass構建套件編譯的時候會去這里找編譯器和各種編譯需要的變量。
-
第三步：默認.emscripten文件中填寫的是我這邊安裝的目錄，你可以用記事本打開進行編輯改成你的目錄。
-
第四步：重新打開QtCreator，切換到工具-選項-kits，重新設置Qt5.15.2 webassemly的編譯器，下拉選擇Emscripten Compiler。
-
第五步：新建個項目，拖幾個控件放界面，編譯大概一分鍾左右，由於是靜態編譯時間會久一點，此時會生成五個文件，其中qtloader.js和qtlogo.svg每個項目是一樣的，不同的文件是untitled.js、untitled.html、untitled.wasm。需要發布的話只需要將這5個文件拷貝到網站的WWW目錄下就行。
-
第六步：編譯完成以后會自動打開電腦默認瀏覽器比如IE瀏覽器，因為IE瀏覽器不支持wasm，所以你需要將地址復制拷貝到edge或者谷歌火狐等瀏覽器運行。
-
第七步：如果要支持中文則需要將中文字體文件添加到項目的資源文件一起編譯。
-
其他說明：首次加載比較慢，后面由於有緩存的原因重新加載非常快，建議發布的時候可以放一個帶寬很好的服務器。
（三）、支持的模塊
目前qt for webassembly套件不是支持所有的模塊，比如常見的sql數據庫模塊就不支持，估計現在wasm還是定位在客戶端的原因吧，network中的tcp udp也不支持，好消息是websocket client是支持的，也就意味着你可以寫個websocket的server端負責監聽和解析，web端直接websocket通信交互，比如傳輸視頻數據，這不就是網頁中顯示實時視頻了！親測無誤。
- Qt5Charts
- Qt5Core
- Qt5Gui
- Qt5Quick
- Qt5Svg
- Qt5WebSockets
- Qt5Widgets
- Qt5QuickControls2
- 其他部分模塊
三、效果圖
