win10安装配置Qt for WebAssembly

1.技术简介

WebAssembly是一种二进制格式，允许在网页中使用沙盒式可执行代码。这种格式几乎与本机代码一样快，并且现在所有主要的Web浏览器都支持这种格式。

Qt for WebAssembly是一个平台插件，可让您构建Qt应用程序，并将其集成到您的网页中。它不需要任何客户端安装，并减少了服务器端资源的使用。

2.安装环境

2.1安装Emscripten

官网链接：https://emscripten.org/docs/getting_started/downloads.html

1. 下载资源包：emsdk-master.zip
2. 把emsdk-master.zip解压到d:盘跟目录
3. 进入emsdk-master目录，执行以下命令：

windows系统：

# 下载和安装最新的SDK工具
emsdk install latest

# 激活最新的SDK工具
emsdk activate latest

# 激活的工具添加到系统环境变量
emsdk_env.bat

# 查看版本
em++ --version

# 安装Qt版本对应的SDK
emsdk install sdk-fastcomp-1.39.8-64bit

# 激活Qt版本对应的SDK
emsdk activate sdk-fastcomp-1.39.8-64bit

# 查看版本
em++ --version

linux系统

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes .emscripten file)
./emsdk activate latest

# Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh

./em++ --version
./emsdk install sdk-fastcomp-1.39.8-64bit
./emsdk activate sdk-fastcomp-1.39.8-64bit
./em++ --version

4. 安装说明：

• 安装下载速度慢可参考：解决安装emscripten下载速度慢的问题
• Qt版本和SDK版本对应关系
  Qt 5.12: 1.38.16
  Qt 5.13: 1.38.27 (multithreading: 1.38.30)
  Qt 5.14: 1.38.27 (multithreading: 1.38.30)
  Qt 5.15: 1.39.8

2.1配置Qt for WebAssembly

本文以Qt5.15版本配置说明，配置命令如下：

# 进入Qt5.15源码目录
cd D:\Qt5.15\5.15.0\Src

# 设置SDK环境变量
D:\emsdk-master\emsdk_env.bat

# 查询环境变量
echo %path% 

#设置环境变量，环境变量是目录，不是文件
set path=%path%;D:\Qt5.15\Tools\mingw810_64\bin;

# 将Qt5.15配置为wasm-emscripten平台的交叉编译版本
configure -no-warnings-are-errors -xplatform wasm-emscripten -platform win32-g++ -nomake examples -prefix %CD%\qtbase

# 构建所需的模块，后面差什么模块可以再编译
mingw32-make -j8 module-qtbase module-qtdeclarative module-qtcharts

# 安装构建的模块
mingw32-make -j8 install

需要注意的地方：

• 配置和编译的时间比较长，具体时间要看电脑性能
• 完成后要把D:\Qt5.15\5.15.0\wasm_32\bin目录下面的libgcc_s_seh-1.dll、libstdc+±6.dll、libwinpthread-1.dll复制到D:\Qt5.15\5.15.0\Src\qtbase\bin目录下面，这几个动态库是必需的。

3.新版本Qt6预览

【Qt 6咨讯】
Qt 6发布前的Qt 5.14和Qt 5.15为承接Qt 5版本与Qt 6的重要桥梁。就像Qt 4.8与Qt 5一样。
Qt 6目标计划于2020年年底前发布版本。

【新一代的QML】
引入强类型，简化维护成本，让编译器生成性能更好的代码。
引入更多类似javascript解释器引擎，主要用于适配单片机等低端硬件。
去掉了QML的版本控制，简化QML代码。
优化QObject与QML的数据交互，删除QObject和QML之间重复的数据结构，避免运行时生成数据结构。
支持把QML编译成高效原生的C++代码。
为QML支持私有方法和属性，用于隐藏实现。
更好的工具集成，加入更多和更完善的编译检错工具。

【下一代图形】
优化2D与3D图形。
它能在编译时根据目标硬件预处理这些素材并在需要时使用。
计划引入统一的主题样式引擎，这将允许我们在桌面和移动平台上获得Qt Widgets和Qt Quick的原生外观。

【统一并且一致的工具库】
Qt 3D Studio和Qt Design Studio合并。
设计工具将集成Photoshop、Sketch、Illustrator、Maya、3D Max等工具。
CMake替换QMake成为官方编译工具(QMake依然支持)。

【增强已有的C++ API】
支持C++17。
QML一些功能将会引入到C++中。

【语言支持】
继续支持Python语言。
新增WebAssembly支持(浏览器运行Qt程序技术)。

【兼容Qt 5和增量改进】
将删除Qt 5中已经废弃的大部分功能(函数、类或模块)。
让Qt 6与Qt 5.15 LTS足够兼容。

4.小结

本文介绍了在win10安装配置Qt for WebAssembly，下一章介绍一个完整的例子，Qt for WebAssembly显示QML实例