玩转Qt(14) | 您所在的位置:网站首页 › QTweb开发 › 玩转Qt(14) |
玩转Qt(14)-Qt与Web混合开发
玩转Qt
Qt Qt实用技能
2020/03/04
本文于 762 天之前发表,文中内容可能已经过时。 前言 简介 Qt的Web方案 Quick WebGL Stream Qt WebAssembly Qt WebEngine/WebView QtWebEngine的更新情况 WebEngine的架构 WebEngine的平台要求 Windows MacOS Linux WebView WebEngine的使用 WebEngine Widget最简Demo 源代码 运行结果 最小发布包 WebEngine Qml最简Demo 源码 运行结果 最小发布包 前言这次讨论Qt与Web混合开发相关技术。 这类技术存在适用场景,例如:Qt项目使用Web大量现成的组件/方案做功能扩展, Qt项目中性能无关/频繁更新迭代的页面用html单独实现,Qt项目提供Web形式的SDK给 用户做二次开发等等,或者是Web开发人员齐全而Qt/C++人手不足,此类非技术问题, 都可以使用Qt + Web混合开发。 (不适用的请忽略本文) 简介这篇文章,会先整体介绍一下Qt的各种Web方案,再提供简单的Demo,并做一些简要的说明。 之后的一篇文章,会通过一个Web控制Qt端小车的案例,来做进一步讨论。 Qt的Web方案Qt提供的Web方案主要包括 WebEngine/WebView、Quick WebGL Stream、QtWebAssembly三种。 Quick WebGL Stream可以参考Qt官方的WebGL Stream介绍文档 https://resources.qt.io/cn/qt-quick-webgl-release-512resources.qt.ioWebGL Stream在5.12中正式发布,其本质是一种通信技术,将已有的QtQuick程序中渲染指令和数据,通过socket传输给Web端,由WebGL实现界面渲染。 其使用方式非常的简单,无需修改源码,应用程序启动时,带上端口参数,例如: ./your-qt-application -platform webgl:port=8998(相当于应用程序变成了一个服务器端程序) 这样程序就在后端运行,看不到界面了,之后浏览器打开本地网址 localhost:8998 或者内网地址/映射后的公网地址,就能在浏览器中看到程序页面。 WebGL Stream的应用不多,Qt官方给的案例是:欧洲某工厂的大量传感器监测设备,都以WebGL Stream的方式运行Qt 程序,本身都不带显卡和显示器,而在控制中心的显卡/显示器上,通过Web打开网页的方式,查看每个设备的运行状况。因此节约了大量显卡/显示器的成本。类比于网吧的无硬盘系统。 涛哥相信,未来结合5G技术会有不错的应用场景。 Qt WebAssemblyQt WebAssembly技术,在5.13中正式发布。本质是把Qt程序编译成浏览器支持的二进制文件,由浏览器加载运行。 一方面可以将现有的Qt程序编译成Web,另一方面可以用Qt/C++来弥补Web程序的性能短板。 Qt WebAssembly在使用细节上还有一些坑的地方,需要踩一踩。后续我再写文章吧。 Qt WebEngine/WebViewQt提供了WebEngine模块以支持Web功能。 Qt WebEngine基于google的开源浏览器chromium实现,类似的项目还有cef、miniblink等等。 QtWebEngine可以看作是一个完整的chromium浏览器。 (WebView是同类的方案,稍微有些区别。后文再说。) QtWebEngine的更新情况浏览器技术十分的庞大,这里先不深入展开,先来关注一下Qt WebEngine对chromium的跟进情况。 数据来源于Qt wiki,Qt每个版本的change log Qt版本 chromium后端 chromium安全更新 5.9.0 56 5.9.1 - 59.0.3071.104 5.9.2 - 61.0.3163.79 5.9.3 - 62.0.3202.89 5.9.4 - 63.0.3239.132 5.9.5 - 65.0.3325.146 5.9.6 - 66.0.3359.170 5.9.7 - 69.0.3497.113 5.9.8 - 72.0.3626.121 5.9.9 - 78.0.3904.108 5.12.0 69 5.12.1 71.0.3578.94 5.12.2 72.0.3626.121 5.12.3 73.0.3683.75 5.12.4 74.0.3729.157 5.12.5 76.0.3809.87 5.12.6 77.0.3865.120 5.12.7 79.0.3945.130 5.14.0 77 5.14.1 79.0.3945.117可以看到Qt在WebEngine模块,一直持续跟进Chromium的更新。 当前(2020/3/4)最新的chromium版本是80。 WebEngine的架构QtWebEngine提供了C++和Qml的接口,可以在Widget/Qml中渲染HTML、XHTML、SVG, 也支持CSS样式表和JavaScript脚本。 QtWebEngine的架构图如下 基于Chromium封装了一个WebEngineCore模块,在此之上, WebEngine Widgets模块专门用于Widget项目, WebEngine 模块用于Qml项目, WebEngineProcess则是一个单独的进程,用来渲染页面、运行js脚本。 Web在单独的进程里,我们开发的时候知道这一点就好了,不需要额外关注, 只要在发布的时候,带上QTDIR目录下的可执行程序QtWebEngineProcess即可。 (这里提一下底层实现原理,使用了进程间共享OpenGL上下文的方式, 实现多个进程的UI混合在一起) WebEngine的平台要求(以Qt5.12为参考) 首先一条是:不支持静态编译 (因为依赖的chromium、chromium本身的依赖库 不能静态编译) 接下来再看看各平台的要求和限制: Windows编译器要 Visual Studio 2017 version 15.8 以上 系统环境要 Windows 10 SDK 默认只支持X64版本,如果要x86版本,要自己编译qt源码。 MacOSMacOS 10.12以上 XCode 8.3.3以上 MacOS 10.12以上 SDK 不支持32-bit 不兼容 Mac App Store (chromium使用了私有api,App Sandbox和chromium Sandbox优先级问题) Linux编译器要 clang, 或者 gcc 5以上 需要pkg-config来探测依赖库,dbus-1和 fontconfig是必须的。 如果配置了xcb,还要额外配置相关库。 WebViewQt还提供了一个WebView组件,可以用来将Web内容嵌入到Qml程序中。(这个没有提供Widget的接口) WebView组件的实现,使用了平台原生api,在移动端意义重大,特别是在ios平台,使用 原生的web view,这样就能兼容App Store了。 在Windows/MacOS/Linux平台,则是渲染部分还是使用了WebEngine。 WebView的使用可以参考官方例子Minibrowser WebEngine的使用WebEngine Widget最简Demo源代码这里示例一个最简单的demo, 使用WebEngine Widget模块提供的QWebEngineView: 1234567//Demo.proQT += core gui webenginewidgetsCONFIG += c++11SOURCES += \ main.cpp注意pro文件中包含的Qt模块 12345678910111213//main.cpp#include #include int main(int argc, char **argv){ QApplication app(argc, argv); QWebEngineView view; view.load(QUrl("https://www.zhihu.com/")); view.show(); return app.exec();} 运行结果上面代码以打开知乎首页为例,运行结果如下 最小发布包涛哥尝试了在Windows平台,做出可用的最小发布包: 尺寸在170M左右。这些依赖项中,除了常见的Qt必备项platforms、Qt5Core、Qt5Gui等, Qt5WebEngineCore是最大的一个,有70M。QtWebEngineProcess.exe是新增加的一个exe程序, 前文说架构图时提到的单独进程就是这个程序实现。 resources/icudtl.dat在其它浏览器引擎中也常看到。 translations/qtwebengine_locales是WebEngine的翻译项,不带可能会发生翻译问题。 Qt5Positioning、Qt5PrintSupport一般不怎么用,但是不带这两个程序起不来。 同时发现Qml和Quick模块也是必须的,Qt5QuickWidgets也用上了。 涛哥查看源码后发现WebEngineCore模块依赖Quick和Qml模块。 WebEngine Qml最简Demo再做一个纯Qml的Demo 源码pro中增加webengine模块即可 12345678910//WebQml.proQT += core gui quick qml webengineCONFIG += c++11SOURCES += \ main.cppRESOURCES += \ Qrc.qrc注意初始化。 1234567891011121314151617//main.cpp#include #include #include int main(int argc, char *argv[]){ QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); QGuiApplication a(argc, argv); //初始化。时机在QApp之后,Window/View构造之前。 QtWebEngine::initialize(); QQuickView view; view.setSource(QUrl("qrc:/main.qml")); view.show(); return a.exec();}qml导入模块,填入url 1234567891011//main.qmlimport QtQuick 2.0import QtWebEngine 1.8Item { width: 800 height: 600 WebEngineView { anchors.fill: parent url: "https://www.zhihu.com" }} 运行结果运行结果和上一个Demo一样 最小发布包这回可以去掉Widget模块 同时也去掉不必要的翻译文件。包大小160M左右,和前面的差别不大。 赏 支付宝打赏 微信打赏为众人抱薪者,不可使其冻毙于霜雪 转载声明: 文章采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可, 转载请注明出处 © 武威的涛哥 |
CopyRight 2018-2019 实验室设备网 版权所有 |