admin管理员组文章数量:1568424
当今的桌面软件开发,web化逐渐成为了趋势,VSCode,Atom等一系列优秀的软件都是基于github家的Electron(使用html,css,js来进行开发的桌面端应用程序),通俗得来说,就是把网页打包成一个在桌面运行的程序。优点是开发快速,前端也能开发桌面软件,并且跨平台,缺点是性能差速度慢,不能做成大型商业软件。类比一下notepad和vscode的打开速度就知道了。
回到本篇博客的目的,我们为什么要在Qt中嵌入一个网页?为什么不直接使用Electron开发整套软件?
1. 由于web端开发更火热,各种框架层出不穷,琳琅满目天花乱坠的效果在web端能很容易做出来。
举个例子,图表。
这是Qt中的QCustomPlot
这是百度web端的echarts
对比一下,哪个图的效果更好一目了然,这还只是2d的图,echarts中还有3d的基于webgl的图,说难听点就是降维打击,在Qt上做这种效果至少得弄个gis,osg啥的,麻烦程度=直接劝退,当然性能方面另说。
更扎心的是,这还只是百度一家的东西,类似的东西阿里有,蚂蚁金服也有,在web端这并不是很惊艳的东西,是大家都有的习以为常的东西而已。
再看一个大数据展板,这东西网上随便下载个模板就能弄,小白也能做出这种效果,但是在Qt中想要实现这套,qss写烂了都不一定写得出来。
至于三维的效果,Threejs上的更夸张,这种复杂场景的纹理贴图,光照阴影,要用vtk做还不知道要做到猴年马月,当然vtk性能更好。
现在可以来解答最开始提出的问题了,因为web端现成的并且效果更好的东西更多,很多时候直接拿来用就好,没必要死磕Qt qml那一套,虽然qml的效果也不错但是用户基数太少,相关资源和支持太过贫乏。
但是全套桌面软件使用web开发可行吗?可不可行取决于用途,如果只是个音乐播放器,文本编辑器,那么全套用Electron开发没毛病。如果是大型软件,追求稳定,那么地基还是得用C++去打,目前市场上大部分的商用软件都是基于C++开发的,包括Adobe公司的全套软件,AutoDesk全家桶等等,只是该需要装饰优化的地方加上一点web端或者其他的一些小东西使效果更好。
下面是正式使用
在Qt中,提供了一个用于访问网页的控件,集成了浏览器的webkit内核和google的v8引擎,不严谨的说,这个控件就是一个微型简易版的浏览器。
- Qt5.0~5.4:webkitwidgets模块 - QWebView
- Qt5.4之后:webenginewidgets模块 - QWebEngineView
下面的内容都是基于新一点的QWebEngineView
先来简单使用一下,在.pro文件中加上QT += webenginewidgets
auto webView = new QWebEngineView(this);
webView->load(QUrl("http://www.baidu"));
// 加载本地网页
// webView->load(QUrl::fromLocalFile("/home/wangjun/TestCode/QtTest/QtTest2/index.html"));
auto main_layout = new QVBoxLayout(this);
main_layout->addWidget(webView);
光是显示是不够的,还需要有交互,在Qt中与web页面进行交互的模块是webchanel,对应类QWebChannel。
QT += webenginewidgets webchannel
除此之外,还需要Qt官方提供的qwebchannel.js文件,如果在安装Qt时选择了安装源码即Src,则在本地安装路径中可以找到这个文件,或者直接去github搜索也可以下载到这个文件。
首先需要写一个辅助的类JsContext.h,用已接收网页中传来的消息
#include <QObject>
#include <QMessageBox>
class HWebContext : public QObject
{
Q_OBJECT
public slots:
void jscallme()
{
QMessageBox::information(NULL, "Test", "Message from web page!");
}
void onMsg(const QString & msg)
{
QMessageBox::information(NULL, "Input text from web", msg);
}
};
在构造函数中为webchanel注册这个类
auto webView = new QWebEngineView(this);
webView->load(QUrl::fromLocalFile("/home/wangjun/TestCode/QtTest/QtTest2/index.html"));
QWebChannel *webchannel = new QWebChannel(webView);
HWebContext *webContext = new HWebContext;
webchannel->registerObject("webContext", webContext);
webView->page()->setWebChannel(webchannel);
auto btn = new QPushButton("clicked Me", this);
auto main_layout = new QVBoxLayout(this);
main_layout->addWidget(btn);
main_layout->addWidget(webView);
// 点击按钮调用网页中的js函数
connect(btn, &QPushButton::clicked, this, [=]()
{
webView->page()->runJavaScript("showAlert()");
});
然后写一个本地的html文件
<!DOCTYPE html>
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title>Qt与Web交互</title>
</head>
<body>
<button id="btn">网页中的按钮</button>
<br>
<br>
<br>
<input id="待发送消息" type="text" name="msgText" />
<input type="button" value="发送网页消息到Qt中" onclick="onBtnSendMsg()" />
<script src="qwebchannel.js" type="text/javascript" ></script>
<script type="text/javascript">
// 定义webchannel对象并初始化
var webobj;
new QWebChannel(qt.webChannelTransport, function(channel)
{
webobj = channel.objects.webContext;
window.foo = webobj;
});
// 点击网页中的按钮弹出Qt中的MessageBox
var btn = document.getElementById("btn");
btn.onclick = function()
{
webobj.jscallme();
}
function showAlert()
{
alert('this is web alert');
}
// 向qt发送文字消息
function sendMsg(msg)
{
if(typeof webobj == 'undefined')
alert("context对象获取失败!");
else
webobj.onMsg(msg);
}
function onBtnSendMsg()
{
var str_msg = document.getElementById("待发送消息").value;
sendMsg(str_msg);
}
</script>
</body>
</html>
点击Qt布局中的按钮会调用网页中的警告函数;点击网页中的按钮会调用Qt中的MessageBox;效果分别如下。
本文标签: 浏览器QTQWebEngineView
版权声明:本文标题:Qt中浏览器QWebEngineView的使用1 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1725797985a1043218.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论