creator找不到编译器 qt_Qt与Web混合开发(一)--简单使用
目录
(放个目录方便预览。目录是从博客复制过来的,点击会跳转到博客)
- 前言
- 简介
- Qt的Web方案
- QtWebEngine的更新情况
- WebEngine的架构
- WebEngine的平台要求
- Windows
- MacOS
- Linux
- WebView
- WebEngine的使用
- WebEngine Widget最简Demo
- 源代码
- 运行结果
- 最小发布包
- WebEngine Qml最简Demo
- 源码
- 运行结果
- 最小发布包
- WebEngine Widget最简Demo
- 下期预告
前言
《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打开网页的方式,查看每个设备的运行状况。因此节约了大量显卡/显示器的成本。类比于网吧的无硬盘系统。
涛哥相信,未来结合5G技术会有不错的应用场景。
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.pro
QT += core gui webenginewidgetsCONFIG += c++11SOURCES += main.cpp
注意pro文件中包含的Qt模块
//main.cpp
#include <QApplication>
#include <QWebEngineView>
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.pro
QT += core gui quick qml webengineCONFIG += c++11SOURCES += main.cppRESOURCES += Qrc.qrc
注意初始化。
//main.cpp
#include <QGuiApplication>
#include <QQuickView>
#include <QtWebEngine>
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.qml
import QtQuick 2.0
import QtWebEngine 1.8
Item {width: 800height: 600WebEngineView {anchors.fill: parenturl: "https://www.zhihu.com"}
}
运行结果
运行结果和上一个Demo一样
最小发布包
这回可以去掉Widget模块
同时也去掉不必要的翻译文件。
多了一些Quick的模块文件。
包大小160M左右,和前面的差别不大。
转载声明
文章出自涛哥的博客 – 点击这里查看涛哥的博客
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可, 转载请注明出处, 谢谢合作 © 武威的涛哥
creator找不到编译器 qt_Qt与Web混合开发(一)--简单使用相关推荐
- linux里qt画直线_Qt与Web混合开发(一)简单使用
前言 <Qt与Web混合开发>系列文章,主要讨论Qt与Web混合开发相关技术. 这类技术存在适用场景,例如:Qt项目使用Web大量现成的组件/方案做功能扩展, Qt项目中性能无关/频繁更新 ...
- creator找不到编译器 qt_VS2017直接使用QT库创建程序
开始学习QT,使用c++,纠结使用VS2017呢,还是QTcreator. 因为信仰VS宇宙第一IDE的头衔,所以想用VS试一下,本以为只要简单调用QT的头文件+库就行,结果弄了半天,还好瞎鼓捣通了. ...
- Web前端开发工程师到底是干什么的?
Web前端开发工程师其实是查BUG,改BUG,写BUG.哈哈,以上内容纯属开玩笑.事实上,Web前端开发工程师简单地说,就是使用HTML.CSS.JavaScript等技术来实现客户端(手机和电脑)上 ...
- 移动端开发之Web App开发
写在前面:本人刚刚接触移动端开发,希望自己的见解能够帮助到他人,不足之处还望提醒. 1 移动端开发分类 1.1 Native App 原生App开发 优点: (1)用户体验好 (2)性能稳定 (3)操 ...
- codeblocks安装后提示找不到编译器,也找不到MinGW目录
codeblocks安装后提示找不到编译器,网上一搜全是更改编译器目录: 可是我试了半天,一直找不到MinGW目录,原来我安装的是不带编译器的版本: 如上图,红框内才是带编译器的.
- CodeBlocks报错原因分析:找不到编译器 / th_en_US.idx' not found! 提示
找不到编译器解决方法 新装了一个CodeBlocks,无法运行程序,报错如下: Project/Target: "ACM1 - Debug":The compiler's setu ...
- web前端开发要不要找个师傅带?
对于其他IT技术职位来说,Web前端工程师算是半个程序员,很多从事此项工作的都是非计算机相关专业出身,这当然是因为互联网行业吸引人以及HTML和CSS入门起点低,目前大学里尚能全民考C(计算机二级), ...
- 警告 初始化默认驱动器时出错“找不到运行 Active Directory Web 服务的默认服务器。”...
在导入AD模块时报错如下 "警告 初始化默认驱动器时出错"找不到运行 Active Directory Web 服务的默认服务器." 报错的是web服务器,第一时间想到的 ...
- WIN10中MATLAB2014找不到编译器解决
WIN10 64位操作系统, MATLAB2014, VS2017 起先我装的VS2017版本,MATLAB中 mex -setup一直找不到编译器,查了好多帖子也没搞明白.后来把VS卸掉,网上下了一 ...
- oracle 找不到程序单元,Oracle Web ADI 加载时错误:ORA-06508: PL/SQL: 无法在调用之前找到程序单元...
Oracle EBS 的Web ADI给批量导入数据提供一个不错的解决方案.但是,Web ADI开发比较麻,主要缺点如: 1.集成器设置好以后不能修改,必须要事先考虑包的存储过程或函数的参数.则否,存 ...
最新文章
- 【java】将自己写的类生成说明文档的方法
- 《阿里巴巴Java开发规约》插件全球首发!
- 【NLP】到目前为止,机器学习与自然语言处理相遇的那些事
- 不能将参数转化为lparam_反渗透纯水机是将自来水直接转化为超纯水的装置
- 云应用基础技术成熟需七年时间
- 重要提醒!人脸识别一定要穿上衣服!
- oppoJava面试!java开发视频聊天
- 更换Qt QtEmbedded库的版本出现问题及解决(交叉编译OpenSSL)
- evernote 的美中不足
- Ubuntu dpkg 常用命令教程
- numpy.reshape
- linux服务器时间不一致,Linux服务器时间不准确
- 如何使用Java以编程方式在Excel中创建数据透视表?
- chrome 浏览器升级后接口无法正常访问
- 你所不知道的良心网站第三弹
- 武当大字门九龙狮子功
- 写英文论文的一些心得
- ITIL Expert
- 做设计师要用到的工具软件
- Java工程师是做什么的?
热门文章
- 【填坑】Ubuntu安装vsftpd
- Spring DelegatingFilterProxy 过滤器 的原理及运用
- 通过saltapi接口安装实例(modules)
- js的concat函数、join 、slice函数及二维数组的定义方式
- Oracle中的rownum不能使用大于的问题
- echo print printf() sprintf()区别
- selenium 问题:OSError: [WinError 6] 句柄无效
- 【ICLR2019】重要的,是那些训练中被多次遗忘的样本
- 算法同学从学校到实习,需要改变什么
- 【学术工具】公式免费转 LaTex 代码,截图、转换一气呵成,每月 1000 次全免费...