找回密码
 立即注册
Qt开源社区 门户 查看内容

Qt 程序与网页互嵌:Qt for WebAssembly

2019-4-13 05:48| 发布者: admin| 查看: 3537| 评论: 0

摘要: 今天这一篇我们主要讲QtforWebAssembly,您可用QtforWebAssembly来编译您的Qt或Quick程序,只要部署一次即可。QtforWebAssembly的搭建指导说明参请见QtforWebAssemblywiki。首先,您需要下载并安装emsdk编译器。过程 ...


今天这一篇我们主要讲Qt for WebAssembly,您可用Qt for WebAssembly来编译您的Qt或Quick程序,只要部署一次即可。

Qt for WebAssembly的搭建指导说明参请见 Qt for WebAssembly wiki 。首先,您需要下载并安装 emsdk编译器。过程有点琐碎,它是我们的交叉编译器。

开发/调试


调试过程有些麻烦,因为浏览器中没有gdb,但是会有状态输出(std::cout,qDebug以及printf)以及浏览器的调试控制台。您可能还需要把网页控制台记录行数上限调高,通过(Firefox)在about:config页面中修改devtools.hud.loglimit.console”。

在代码中添加

EM_ASM({ debugger });

可以弹出浏览器调试器,作为设置断点的手段。(别忘了#include<emscripten.h>)。不方便的是您需要重新编译。

屏幕截图


不是所有都能完美运行,但以下是一些成功运行示例的屏幕截图:

collidingmice:




Standarddialogs:显示多窗口




QOpenGLWindow能够运行,并且接近60fps,尽管现在它们是“全屏”,也就意味着它们将占据整个浏览器窗口。QOpenGLWidget仍然有一些问题,有些着色器看上去有些问题。

Emscripten把OpenGL的调用翻译成WebGL,因此对于桌面和嵌入式版本有一定限制。

Openglwindow:




除了使用‘wip/webassembly’分支的QtBase和QtDeclarative模块,运行顺利的Qt模块还有:

  • QtCharts

  • QtGraphicalEffects

  • QtQuickControls

  • QtQuickControls2

  • QtWebSockets

  • QtMqtt(使用websockets 示例中的WebSocketIODevice)


如果要使用QtMqtt,您需要从QtMqtt的websocketsubscription示例中集成WebSocketIODevice类到您的应用。

还有一个正在开发中(WIP)的合并请求(MR),主要是关于QtSensors模块后台,实现移动端(包括笔记本电脑)的屏幕方向随重力改变功能。它已经编译通过但还需要测试。

QML 时钟:




因为javascript和webassembly只有一个线程,QtDeclarative只能工作在单线程中。

textinsgnode:




QtCharts、QtGraphicalEffects、QtQuickcontrols、QtQuickControls2 都能直接运行、无需改变。

QtCharts示波器:




IoT 传感器demo显示demo数据




有一个正在开发中(WIP)的合并请求,关于剪切板的支持,但是现在它还没有完成。目前只支持纯文本。

无法工作的部分 QTBUG-63917


  • 多线程QTBUG-64700

  • QThread完全失效

    浏览器禁用,因为担心容易崩溃/安全漏洞?

  • 大部分QNetwork QTBUG-63920

  • 无法在javascript沙盒中查找DNS

    简单的QNAM请求可以运行

  • 本地文件系统读写QTBUG-67834

  • 持久化 QSettings,同步设置文件非常缓慢并且只能异步 QTBUG-63923

  • QOpenGLWIdget QTBUG-66944

  • Opengl只在全屏时工作QTBUG-67717

  • 部分着色器QTBUG-67338

  • QResource 无法找到Qt内置的着色器

  • 执行循环和其他平台上的不一样QTBUG-64020

  • exec() 事件循环不会在你期望的地方返回。

    模态窗口返回值无效,但是可以用非模态信号和show()组合绕开这个问题。尽管模态对话框和窗口还是可以打开。

  • toUpperCase QTBUG-66621

  • QClipboard QTBUG-64638

示例


  • SensorTagDemo

  • QtQuickControls gallery

  • HelloWindow

  • TextEdit


WebAssembly是一种可在网页浏览器中执行的字节码格式,应用程序无需执行独立的安装步骤,就能通过兼容的网页浏览器部署到设备上。应用程序会运行在网页浏览器的安全沙盒中,适合于那些不需要访问完整设备功能、只需便捷简单安装过程的应用。在Qt 5.11中,我们发布了Qt for WebAssembly技术预览版,您可尝试直接在浏览器窗口中运行Qt应用程序。

来源:Qt






长|按|扫|码|关|注


推荐阅读













----------------------------------------------------------------------------------------------------------------------
我们尊重原创,也注重分享,文章来源于微信公众号:合迅科技,建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------

鲜花

握手

雷人

路过

鸡蛋

公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了