Qt中浏览器QWebEngineView的使用1

本文主要是介绍Qt中浏览器QWebEngineView的使用1，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

当今的桌面软件开发，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.com"));
// 加载本地网页
// 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.org/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中的MessageBoxvar 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对象获取失败！");elsewebobj.onMsg(msg);}function onBtnSendMsg(){var str_msg = document.getElementById("待发送消息").value;sendMsg(str_msg);}
</script>
</body>
</html>

点击Qt布局中的按钮会调用网页中的警告函数；点击网页中的按钮会调用Qt中的MessageBox；效果分别如下。