Qt 6.2 Web Assembly的新增功能
Qt 6.2 Web Assembly What's New
Qt 6.2 Web Assembly的新增功能
Wednesday December 29, 2021 by Veli-Pekka Heinonen | Comments
2021年12月29日星期三，Veli-Pekka Heinonen | 评论
You may have seen the news that we released Web Assembly as Tech Preview in Qt 6.2 LTS a while ago (please find the latest Qt here). This blog post is a Qt6 refresh of a similar post done earlier for Qt 5, starting a series of Qt Web Assembly posts discussing the recent developments on Qt6 side.
您可能已经看到新闻，不久前我们在Qt6.2LTS中发布了Web Assembly作为技术预览版（请在此处查找最新版的Qt）。这篇博客文章是之前为Qt5所做的类似文章的Qt6更新，开始了一系列讨论Qt6在发展Qt Web Assembly方面的最新文章。
We use Emscripten to compile Qt into a binary format that runs in a web browser. Instead of compiling and deploying for multiple platforms, the idea is to compile and deploy on a web server for any platform that has a browser that supports WebAssembly. So essentially you could take your C++ application and recompile for Web Assembly and then run in compatible browsers. If you are an enterprise and have multiple clients that have various platforms in use, you could use Qt for WebAssembly to compile your Qt or Quick app and deploy once with zero installation without a need to go via app stores.
我们使用Emscripten将Qt编译成在web浏览器中运行的二进制格式。与其说是对多个平台进行编译和部署，不如说是对具有支持WebAssembly浏览器的，任何平台在web服务器上进行编译和部署。因此，基本上可以使用C++应用程序并重新编译成Web Assembly，然后在兼容的浏览器中运行。如果您是一家企业，并且有多个平台的客户端，那么您可以使用Qt for WebAssembly编译您的Qt或Quick应用程序，并在无需安装的情况下部署一次，并且也不需要通过应用商店。
Qt for WebAssembly build instructions are listed on the Qt for WebAssembly documentation. You will first need to download and setup the emsdk compiler. It’s fairly trivial to do. We use this as the cross-compiler.
Qt for WebAssembly构建说明列在Qt for WebAssembly文档中。您首先需要下载并安装emsdk编译器。这件事相当琐碎。我们使用它作为交叉编译器。
Qt Web Assembly Screenshots
Qt Web Assembly屏幕截图
Here are some screenshots of a few examples also available in the Qt Web Assembly Examples page:
以下是Qt Web Assembly提供的一些示例的屏幕截图：
https://www.qt.io/qt-examples-for-webassembly
Additional examples by the community here:
社区的其他示例如下：
https://s3.eu-west-2.amazonaws.com/wasm-qt-examples/last/index.html#
Qt 6 WebAssembly QtQuick3d
https://qtandeverything.blogspot.com/2021/04/qt-6-webassembly-qtquick3d-or-not-april.html?m=1&fbclid=IwAR1-K0Rg1BuLTGXCFu5WLVwLqWt1ssMEi6SFNFAs0VvhPxj0KeyCoTNSdiQ
Industrial panel - Originally made to show various use cases of Qt running on low-powered embedded hardware. This demonstrates how the same UIs could also be accessed through a web browser with no need for any changes to the code.
工控面板-最初用于显示Qt在低功耗嵌入式硬件上运行的各种用例。这演示了如何通过web浏览器访问相同的UI，而无需对代码进行任何更改。
Hello Window - Example of how to incorporate raw OpenGL drawing in a Qt application.
Hello窗口-如何将原始OpenGL图形合并到Qt应用程序中的示例。
QOpenGLWindow works and seems to get near 60 fps.
QOpenGLWindow的工作速度似乎接近60 fps。
Emscripten translates OpenGL calls in WegGL, so there are limitations from the desktop and embedded versions.
Emscripten将OpenGL转换成WegGL再调用，因此桌面版和嵌入式版本都有限制。
Sensor Tag - Sensor Tag Demo - "Internet of things" demo which visualizes sensor data from a Texas Instruments SensorTag device, transmitted over web sockets. Can also be run with mock up data. Note that since this has been designed to work with a minimum screen size in mind, it may not look good on small screens or with smaller windows.
传感器标签-传感器标签演示-“物联网”演示，可视化Texas仪器传感器标签设备的传感器数据，通过web sockets传输。也可以使用模型数据运行。请注意，由于这是为了在考虑最小屏幕尺寸的情况下工作而设计的，因此在小屏幕或小窗口上可能不太好看。
Slate - A sprite drawing app that demonstrates a full "main window" style application with menus and toolbars as well as save and load functionality.
Slate-一个精灵动画应用程序，演示完整的“主窗口”样式的应用程序，包括菜单、工具栏以及保存和加载功能。
Chart Themes - Demonstrates the look and feel of different built-in Qt Charts themes.
图表主题-演示不同内置Qt图表主题的外观和感觉。
QtCharts, QtGraphicalEffects, QtQuickcontrols, QtQuickControls2 all work without changes.
QtCharts、QtGraphicalEffects、QtQuickcontrols、QtQuickControls2都可以正常工作，无需更改。
QML Chart - Basic example of different chart types in QML API of Qt Charts.
QML图表-Qt图表的QML API中不同图表类型的基本示例。
Developing/Debugging with Qt Web Assembly
Qt Web Assembly的开发与调试
Debugging is still under construction as there is no gdb, but there are output statements (std::cout, qDebug and printf) as well as the debugger console in the browser. You might also have to increase the Web console log limit with (Firefox) "devtools.hud.loglimit.console" from about:config.
调试仍在完善中，因为没有gdb，但在浏览器中有输出语句（std:：cout、qDebug和printf）以及调试器控制台。您可能还必须在about:config（Firefox）添加“devtools.hud.loglimit.console”，以增加Web控制台日志限制。
To set a breakpoint, add
要设置断点，请添加
EM_ASM({ debugger });
into your code to popup the browser debugger. (Don't forget to #include <emscripten.h>) The downside is that you need to recompile.
添加到代码中，以弹出浏览器调试器。（别忘了 #include
Qt modules known to work are listed on the Qt for WebAssembly documentation, including:
Qt for WebAssembly文档中列出了已知可用的Qt模块，包括：
- Qt Core
- Qt Gui
- Qt Network
- Qt Declarative
- Qt Svg
- Qt Charts
- Qt mqtt (using WebSocketIODevice from the websockets example)
- Qt mqtt（使用websockets示例中的WebSocketIODevice）
To use QtMqtt, you will need to integrate the WebSocketIODevice class from the websocketsubscription example in QtMqtt into your app.
要使用QtMqtt，您需要将QtMqtt中websocketsubscription示例中的WebSocketIODevice类集成到您的应用程序中。
Things under construction
正在完善的事项
- Improved multithreading support: Qt 5 supports starting secondary threads, using the pthreads implementation provided by Emscripten. Qt 6.3 improves on this and adds support for calling exec() and running the event loops on on secondary threads.
- 改进的多线程支持：qt5使用Emscripten提供的pthreads实现启动辅助线程。Qt 6.3对此进行了改进，并添加了对调用exec() 和在辅助线程上运行事件循环的支持。
- Expermiental support for Emscripten’s Asyncify, which enables calling blocking API like QEventLoop::exec() and QDialog::exec() on the main thread.
- 实验性地支持Emscripten的异步执行，它支持在主线程上调用QEventLoop::exec()和QDialog::exec() 等阻塞API。
- Improved networking support. Qt 5 supports web sockets and QNetworkAccessmanager http(s) requests. Qt 6 adds support for TCP and UDP sockets, using Emscripten’s socket tunneling
- 改进的网络支持。Qt5支持web sockets和QNetworkAccessmanager的http(s) 请求。Qt6使用Emscripten的套接字隧道添加了对TCP和UDP套接字的支持
- Improved clipboard support. Qt 5 supports text copy-paste, Qt 6.3 improves on this and adds suport for copying and pasting images.
- 改进的剪贴板支持。Qt5支持文本复制粘贴，Qt6.3对此进行了改进，并增加了对复制和粘贴图像的支持。