大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1.什么是 QT for WebAssembly

QT 是一个免费的开源小部件工具包，用于创建图形用户界面以及跨平台应用程序。

Qt for Webassembly lets you to run Qt applications on the web.

QT 之使用选择拥抱 WebAssembly ，是因为 QT 可以在 WebAssembly 中运行其业务逻辑，然后通过调用 JavaScript 来运行 UI 和 DOM 访问。 这样许多小型和大型 C 应用程序都可以使用 QT 作为其图形库，从而凸显了 WebAssembly 的可移植性。结果表明，小型项目现在可以轻松拥有可用的 Web 目标，以开发者熟悉的语言将应用程序带到 Web 上。

总之，使用 Qt for WebAssembly，开发者可以将应用程序作为在浏览器沙箱中运行的 Web 应用程序进行分发，此方法适用于不需要完全访问主机设备功能的 Web 分布式应用程序。

但是，需要注意的是，Qt for WebAssembly 某些模块尚未受支持或处于技术预览版中，目前支持的模块主要包括：

Qt Core、Qt GUI、Qt Network、Qt WidgetsQt QML、Qt Quick、Qt Quick ControlsQt Quick LayoutsQt 5 Core Compatibility APIsQt Image FormatsQt OpenGL、Qt SVGQt WebSockets2.如何使用 Qt for WebAssembly2.1 构建应用程序

从 Qt 的角度来看，WebAssembly 只是另一个目标平台。

从 Qt 6.4 开始，Web 是选定的相关模块的官方支持目标平台。 开发者可以在 Linux、macOS 和 Windows 主机平台上下载二进制版本并构建要在 Web 浏览器运行的 Qt 应用程序。

Qt for WebAssembly 支持使用 qmake 和 make 或使用 ninja 或 make 的 CMake 构建应用程序。

$ /path/to/qt-wasm/qtbase/bin/qt-cmake .$ cmake --build .

运行以上命令时，构建应用程序会生成多个输出文件，包括：应用程序和 Qt 代码（静态链接）的 .wasm 文件，以及可以在浏览器中打开以运行应用程序的 .html 文件。

2.2 运行应用程序

运行 QT 应用程序需要 Web 服务器。 构建输出文件都是静态内容，因此任何 Web 服务器都可以。 但是，某些用例可能需要特殊的服务器配置，例如：提供 https 证书或设置启用多线程支持所需的 http 标头。

Emscripten 提供了用于测试运行应用程序的 emrun 实用程序。 Emrun 启动一个 Web 服务器，启动一个浏览器，并且还将捕获并转发 stdout/stderr（通常会转到 JavaScript 控制台）。

/path/to/emscripten/emrun --browser=firefox appname.html// Emrunpython -m http.server// python 服务器

同时，Qt 官方还提供了一个开发人员 Web 服务器，其使用 mkcert 生成 https 证书，从而允许测试需要安全上下文的 Web 功能。Web 服务器还将 COOP 和 COEP 标头设置为支持 SharedArrayBuffer 和多线程的值。

qtwasmserver 脚本启动一台默认绑定到本地主机的服务器，开发者可以使用 -a 命令行参数添加其他地址，或使用 --all 绑定到所有可用地址。

python /path/to/qtbase/util/wasm/qtwasmserver/qtwasmserver.py --all

更多关于 Qt for WebAssembly 的用法可以参考文末资料，本文不再过多展开。

3.展望

随着 WebAssembly 技术的不断进步和时间的推移，Qt 将进一步增强和完善对 WebAssembly 的支持，例如：通过优化编译器和运行时进一步提高 WebAssembly 应用的执行效率，同时扩展对更多平台的支持，同时结合其他新兴技术，例如：云计算、物联网等使得Qt 与 WebAssembly 的结合在更多领域发挥巨大潜力。

参考资料

https://madewithwebassembly.com/showcase/qt/

https://doc.qt.io/qt-6/wasm.html

https://www.qt.io/qt-examples-for-webassembly

https://www.youtube.com/watch?app=desktop&v=YSAUoAI5hQA