linux里qt画直线_Qt与Web混合开发(一)简单使用
前言
《Qt与Web混合开发》系列文章,主要讨论Qt与Web混合开发相关技术。
这类技术存在适用场景,例如:Qt项目使用Web大量现成的组件/方案做功能扩展,
Qt项目中性能无关/频繁更新迭代的页面用html单独实现,Qt项目提供Web形式的SDK给
用户做二次开发等等,或者是Web开发人员齐全而Qt/C++人手不足,此类非技术问题,
都可以使用Qt + Web混合开发。
(不适用的请忽略本文)
简介
第一篇文章,会先整体介绍一下Qt的各种Web方案,再提供简单的Demo,并做一些简要的说明。
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.io
WebGL Stream在5.12中正式发布,其本质是一种通信技术,将已有的QtQuick程序中渲染指令和数据,通过socket传输给Web端,由WebGL实现界面渲染。
其使用方式非常的简单,无需修改源码,应用程序启动时,带上端口参数,例如:
./your-qt-application -platform webgl:port=8998
(相当于应用程序变成了一个服务器端程序)
这样程序就在后端运行,看不到界面了,之后浏览器打开本地网址 localhost:8998 或者内网地址/映射后的公网地址,就能在浏览器中看到程序页面。
WebGL Stream的应用不多,Qt官方给的案例是:欧洲某工厂的大量传感器监测设备,都以WebGL Stream的方式运行Qt 程序,本身都不带显卡和显示器,而在控制中心的显卡/显示器上,通过Web打开网页的方式,查看每个设备的运行状况。因此节约了大量显卡/显示器的成本。类比于网吧的无硬盘系统。
2. WebAssembly
Qt WebAssembly技术,在5.13中正式发布。本质是把Qt程序编译成浏览器支持的二进制文件,由浏览器加载运行。
一方面可以将现有的Qt程序编译成Web,另一方面可以用Qt/C++来弥补Web程序的性能短板。
Qt WebAssembly在使用细节上还有一些坑的地方,需要踩一踩。后续我再写文章吧。
3. WebEngine/WebView
Qt提供了WebEngine模块以支持Web功能。
Qt WebEngine基于google的开源浏览器chromium实现,类似的项目还有cef、miniblink等等。
QtWebEngine可以看作是一个完整的chromium浏览器。
(WebView是同类的方案,稍微有些区别。后文再说。)
QtWebEngine的更新情况
浏览器技术十分的庞大,这里先不深入展开,先来关注一下Qt WebEngine对chromium的跟进情况。
数据来源于Qt wiki,Qt每个版本的change log
可以看到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源码。
MacOS
MacOS 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,还要额外配置相关库。
WebView
Qt还提供了一个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:
//Demo.proQT += core gui webenginewidgets
CONFIG += c++11
SOURCES += \ main.cpp
注意pro文件中包含的Qt模块
//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平台,做出可用的最小发布包:
尺寸在160M左右。这些依赖项中,除了常见的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模块即可
//WebQml.proQT += core gui quick qml webengine
CONFIG += c++11
SOURCES += \ main.cpp
RESOURCES += \ Qrc.qrc
注意初始化。
//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
//main.qmlimport QtQuick 2.0import QtWebEngine 1.8Item { width: 800 height: 600 WebEngineView { anchors.fill: parent url: "https://www.zhihu.com" }}
运行结果
运行结果和上一个Demo一样
最小发布包
这回可以去掉Widget模块
同时也去掉不必要的翻译文件。
多了一些Quick的模块文件。
包大小160M左右,和前面的差别不大。
linux里qt画直线_Qt与Web混合开发(一)简单使用相关推荐
- QT画直线 粗线和细线长短不一致
QT画直线 粗线和细线长短不一致 原因是画笔有个笔帽的样式 笔帽的样式 所谓笔帽是个很奇怪的东西, 如果搞不好的话, 很容易被迷惑到了. 笔帽会在每绘制每一截线时, 在起点和终点都添加一点点的东西, ...
- qt connect函数_Qt 串口上位机开发Rice 上位机 学习开发
前几天分享了一个使用C#开发的串口上位机,那么今天教你如何100行QT代码实现一个串口上位机.如果你学习过C++,那么使用QT开发软件,就不是什么大问题了,QT很多时候使用在linux上.所以使用QT ...
- linux ipp qt,win10+QT5.10.1搭建OpenCV开发环境
一. 搭建前的准备工作 1.下载QT 2.下载OpenCV 3.下载Cmake工具 二.安装软件 1.QT傻瓜式安装,记得安装路径即可 2.Cmake安装,注意在安装过程中勾选"为所有用 ...
- python能绘制统计图吗-特征锦囊:常用的统计图在Python里怎么画?
今日锦囊 常用的统计图在Python里怎么画? 这里的话我们介绍几种很简单但也很实用的统计图绘制方法,分别有条形图.饼图.箱体图.直方图以及散点图,关于这几种图形的含义这边就不多做解释了. 今天用到两 ...
- python画简便的图-特征锦囊:常用的统计图在Python里怎么画?
今日锦囊 常用的统计图在Python里怎么画? 这里的话我们介绍几种很简单但也很实用的统计图绘制方法,分别有条形图.饼图.箱体图.直方图以及散点图,关于这几种图形的含义这边就不多做解释了. 今天用到两 ...
- 讯捷CAD编辑器一秒解决CAD制图怎么画直线
很多人刚开始学习CAD制图的时候,可能记住了很多的快捷键,很多的命令,但是由于自己没有实际的去操作,根本不知道怎么开始画图,比如说画直线,这是一件很简单的事情,我们接着往下看.那么以下就是使用讯捷CA ...
- Web前端开发工程师到底是干什么的?
Web前端开发工程师其实是查BUG,改BUG,写BUG.哈哈,以上内容纯属开玩笑.事实上,Web前端开发工程师简单地说,就是使用HTML.CSS.JavaScript等技术来实现客户端(手机和电脑)上 ...
- 移动端开发之Web App开发
写在前面:本人刚刚接触移动端开发,希望自己的见解能够帮助到他人,不足之处还望提醒. 1 移动端开发分类 1.1 Native App 原生App开发 优点: (1)用户体验好 (2)性能稳定 (3)操 ...
- Linux下 Qt界面程序嵌入另一个Qt界面程序_Qt应用嵌入外部进程窗口
项目工程的实现,想要使用多个程序进行实现,在里面存在一定的调用的过程:调查的情况如下 Qt界面程序嵌入另一个Qt界面程序[Linux] Qt界面程序嵌入另一个Qt界面程序[Linux]_ptc321的 ...
最新文章
- 如何判断车与路边线距离_6家快递公司共享分拣线配送车,效果如何?
- Linux下如何设置和查看环境变量
- JixiPix Snow Daze for Mac(下雪效果制作软件)
- html点击图片可以放全屏,html:点击图片放大到全屏,再次点击缩回
- Javascript通获得国家 城市 国家代号
- 六面体单元的体积计算方法
- Vue+Webpack打造todo应用(慕课学习笔记)
- 善网ESG报告(第十期)
- [分割一切!] SegmentAnything真的太强了
- Matlab - Solidworks 机器人建模(5)—— 给模型添加摩擦力
- 苹果电脑登不上苹果商店_附近没有苹果商店? 尝试苹果授权服务提供商
- 基于Golang的个人博客-goblog
- DevOps到底是什么意思?-小白收藏
- 985的计算机专业硕士就业如何,985高校硕士就业率排名出炉!西安交大第一
- 用python的turtle画炫酷的图
- 2021-2027全球与中国汽车双回路冷却系统市场现状及未来发展趋势
- 记2017年百度之星决赛
- linux提取glibc安装包,linux glibc安装
- Guido 转身离去,Python 何去何从?
- 飞书搜索初步分析-以移动端为例
热门文章
- 程序员九重镜界,很老的今天刚刚翻出来
- 207. Course Schedule
- HDU-4278 Faulty Odometer 数学递推 || 八进制
- session很快失效_深夜,我偷听到程序员要对session下手...
- python unittest生成html报告_python unittest--HTMLTestRunner生成报告
- Tidb集群加mysql_TiDB - 快速入门,集群搭建
- springboot如何对本地数据库增删改查_SpringBoot整合Mybatis实现数据库增删改查
- python如何输入空行_在python中,如何在接受用户输入时跳过空行?
- 好用的cnn网络_DPCNN,究竟是多么牛逼的网络呢?
- WinCE中的RAM-Based Registry与HIVE-Based Registry