一、前言
从Qt5.15开始，官方的在线安装下载器提供了Qt for WebAssembly构建套件，通过这个套件可以将你现有的Qt程序直接编译成wasm文件，然后直接网页运行，主流的浏览器都支持，例如谷歌、火狐、edge等等（IE不行）；
大致的原理就是借助emsdk中的emscripten编译器将Qt的程序直接静态编译生成wasm文件,然后同时生成对应的js文件和html文件，js文件负责加载，wasm文件进行编译使用canvs绘制程序；
WebAssembly介绍：
- WebAssembly是一种可以使用非JavaScript编程语言编写代码并且能在浏览器上运行的技术方案。
- WebAssembly有一套完整的语义，实际上wasm是体积小且加载快的二进制格式，其目标就是充分发挥硬件能力以达到原生执行效率。
- WebAssembly运行在一个沙箱化的执行环境中，甚至可以在现有的JavaScript虚拟机中实现。在web环境中，WebAssembly将会严格遵守同源策略以及浏览器安全策略。
- WebAssembly设计了一个非常规整的文本格式用来、调试、测试、实验、优化、学习、教学或者编写程序。可以以这种文本格式在web页面上查看wasm模块的源码。
- WebAssembly在web中被设计成无版本、特性可测试、向后兼容的。WebAssembly可以被JavaScript调用，进入JavaScript上下文，也可以像WebAPI一样调用浏览器的功能。当然，WebAssembly不仅可以运行在浏览器上，也可以运行在非web环境下。
二、Ubuntu
1、在线安装Qt15：在线安装下载器：https://download.qt.io/official_releases/online_installers/
安装时记得勾选WebAssembly，如下：
2、安装依赖
# 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
3、安装Emscripten SDK
git clone https://github.com/emscripten-core/emsdk
cd emsdk
./emsdk install 1.39.8
./emsdk activate 1.39.8
./emsdk list //查看安装版本
source ./emsdk_env.sh
em++ -v
附：卸载只需要删除emsdk文件夹重新下载配置即可
选择相应的版本进行安装，否则会出问题，不一定成功
| 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.
4、将emsdk/.emscripten文件复制到~路径，并修改emsdk的路径
5、配置Qt编译器
工具–>选项–>设备，设置emsdk路径
6、新建工程、编译
编译会生成这5个文件：
- qtloader.js
- qtlogo.svg
- Test.html
- Test.js
- Test.wasm
因为不支持直接从文件打开，所以如果要对页面进行访问，最简单的方法就是用python开启一个web服务器：
python3 -m http.server
然后在浏览器（例如Ubuntu自带的火狐）中直接打开http://127.0.0.1:8000/test.html就能看到程序了
三、Windows
四、支持的模块
目前Qt for WebAssembly套件不是支持所有的模块，比如sql数据库模块、network中的tcp/udp，支持的模块如下：
- Qt5Charts
- Qt5Core
- Qt5Gui
- Qt5Quick
- Qt5Svg
- Qt5WebSockets
- Qt5Widgets
- Qt5QuickControl2
- 其它模块