Wednesday December 29, 2021 byVeli-Pekka Heinonen|Comments
星期三，2021年12月29日，Veli-Pekka Heinonen | 评论
You may have seen thenews that we releasedWeb Assembly as Tech Previewin Qt 6.2 LTS a while ago (please find the latestQthere). 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 useEmscriptento 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 theQt for WebAssembly documentation.You will first need to download and setup theemsdk compiler. It’s fairly trivial to do. We use this as the cross-compiler. Qt for WebAssembly构造说明列在列Qt for WebAssembly在文档中。您首先需要下载和安装emsdk编译器。这件事很琐碎。我们用它作为交叉编译器。
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、QtQuickControls可正常工作，无需更改。
QML Chart- Basic example of dfferent chart types in QML API of Qt Charts.
QML图表-Qt图表的QML API中不同图表类型的基本示例。
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 <emscripten.h>）缺点是需要重新编译。
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类集成到您的应用程序中。
- 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对此进行了改进，并增加了对复制和粘贴图像的支持。