Qt6.3 Webassembly编译

Qt6.3 Webassembly编译

准备说明

• 编译前需要先准备好emscripten关键，具体可以参见上一篇Qtwebassembly关于emscripten环境配置,Qt6.3版本官方文档推荐的emscripten版本为3.1.6
• qt6采用cmake进行工程构建，在指定交叉编译生成wasm-emscripten时需要指定CMAKE_TOOLCHAIN_FILE

export CMAKE_TOOLCHAIN_FILE=/extenddisk/qtsourcecode/qt6/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake

• QT_HOST_PATH设置，在交叉编译时必须指定一个已经编译好同版本工具链接地址用于交叉编译时使用（moc,rcc)等工具，该环境变量可以通过configure参数-qt-host-path 来指定，如果系统已安装可以直接指定为安装路径。

• When cross-compiling, this must be set to the install location of Qt for the host platform. It is used to locate tools to be run on the host (moc, rcc, androiddeployqt, and so on)

构建

Configure

在执行编译之前需要先执行configure执行相应编译配置，因为Qt目前并不是所有模块都支持，因此对于一些不需要的模块我这边直接通过-skip参数进行跳过，对于一些不需要的特性也可以选择忽略，这样不仅可以提高编译速度还能减小wasm文件大小。Qt6.3 webassembly已支持多线程因此如果需要支持可以通过-feature-thread来选择开启（此处仅仅只Qt编译开启支持，生效与否还要看浏览器是否支持）。开启多线程支持后相比未设置该属性在后续生成的文件有所不同，多线程支持会多出一个xx.worker.js文件。

./configure -xplatform wasm-emscripten --prefix=$PWD/qtbase  -qt-host-path /path/to/qtbase -confirm-license -opensource -release -static -c++std c++11 -optimized-qmake -no-strip -skip qtwebengine -skip qtwebview -skip qtwayland -skip qtserialport -skip qtspeech -skip qtmultimedia -feature-thread

注意：
1.Qt6.x已采用cmake构建，并且每个版本编译对cmake都有版本要求，如果cmake版本过低会出现./configure会由于解析.cmake文件时语法不支持导致失败，6.3版本使用cmake v3.23.1版本测试可行。可以自行下载编译安装，编译为: ./configure make -j8 && make install，此处安装并不是安装到系统路径下，因此使用时需要指定
2.官方文档推荐Qt6.3对应的emscripten版本是3.1.6但是在执行完configure后存在警告应该使用3.0.0版本emscripten，可能是官方的bug，是否存在未知问题需要实际使用发现

编译安装

使用parallel参数并行编译
cmake --build . --parallel && cmake install .
在编译过程中可能会遇到<zstd.h>文件找不到编译错误，通过查看代码看到宏MIME_DATABASE_IS_ZSTD被定义开启使用zstd压缩算法支持，该行为在cmake 版本大于3.18时或者QT_AVOID_CMAKE_ARCHIVING_API=off时被开启，因为cmake版本固定，可以通过在./configure 时添加
– -DQT_AVOID_CMAKE_ARCHIVING_API=ON参数来修复，自测可行。如果一定要使用zstd则可以自行下载安装zstd包，使用./configure -system-zstd进行配置，我这边装包后测试引入了一些其它问题所以没有继续跟进。

测试

工程下载

下载链接

问题说明

此处测试与Qtwebassembly测试工程代码一致，但需要注意一些问题。

• 如果在编译configure时设置了-feature-thread开启多线程支持，那么启动http server在浏览器中打开编译工程生成的html文件时会出现SharedArrayBuffer is not defined问题，如下图所示：该问题的官方说明如下：

-Multithreading requires browser support for SharedArrayBuffer, see caniuse sharedarraybuffer for current supported status. If suppoerted, SharedArrayBuffer will be enabled provided the web server sets the COOP and and COEP headers:

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

因此需要在启动的测试服务器中设置这两个选项。不过管方已经为我们提供了一个测试服务程序qtwasmserver，可以通过它来启动web服务。

qtwasmserver

Qt 提供了一个开发者网络服务器，它使用 mkcert 来生成 https 证书。这允许测试需要安全上下文的 Web 功能。请注意，通过 http://localhost 传递也被认为是安全的，不需要证书。Web 服务器还将 COOP 和 COEP 标头设置为启用对 SharedArrayBuffer 和多线程的支持的值。qtwasmserver 脚本启动一个默认绑定到 localhost 的服务器。您可以使用 -a 命令行参数添加其他地址，或使用 --all 绑定到所有可用地址。

python3 /path/to/qtbase/util/wasm/qtwasmserver/qtwasmserver.py -a 127.0.0.1 -p 8585 

如果找不到包netifaces则需要通过命令安装
sudo apt install python3-netifaces

如果要支持https需要先生成mkcert可执行文件并拷贝到/usr/bin目录下，否无法访问https地址。

效果展示

参考资料

• https://doc.qt.io/qt-6/wasm.html
• http://qt6.digitser.net/6.2/zh-CN/wasm.html
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/Planned_changes