QWebEngine-基于chromium内核的浏览器框架

近期,因为同学所托,稍微涉足了一下并不熟悉的Web浏览器这一块。由于之前用过Qt Webkit,便准备动手试试看,能不能在网页中实现自动填表。

自动填表的实现方法挺多,有基于JS的,基于IE OLE的,还有直接模拟鼠标、键盘操作的。论实现的简单程度,还是JS比较方便。之前QtWebkit中即可直接调用JS脚本,结果发现,Qt不知道什么时候,就把QWebKit从官方仓库中移出了。给的解释是“需要一个更现代、更高性能,最先进的Web浏览器实现”,于是,看中了谷歌的 chromium 。目前关于QWebEngine的系统文档还不是很多,

一、QWebKit与QWebEngine的区别

1. 模块结构

这就使得实现诸如JS调用返回值这样的功能,QWebEngine需要的代码量显著多于QWebKit。我们把QWebEngine的架构示意图官网上直接贴来:

(1)QtWebEngine模块结构

模块中,Qt WebEngine Core是基于chromium的核心,widgets、WenEngine和 process主要分别针对桌面、QML等需求。
WebEngine

(2)桌面应用的类结构

Desktop

(3)QML的类结构

QML

2. 与WebKit主要区别

区别项目 WebKit WebEngine
调用习惯 同步 异步
Html5兼容性 较差
windows编译器兼容性

(1) 同步vs异步

最大的区别,莫过于使用的习惯了。QWebKit很多操作都是同步进行的,包括JS的调用、获得返回值等等。QWebEngine几乎所有的操作都是异步的。

(2)Html5兼容性

WebKit打开带有WebGL的3d CesiumJS 地理信息客户端时,性能显著低于 QWebEngine。在python tensorflow 对应的tensorboard监控状态页面表现差别更大。

(3)编译器兼容性

WebKit在windows下有mingw、vc++几个版本的预编译包。但是,要是使用QWebEngine,貌似暂时只能使用VisualStudio,且官方提供的是x64版本。从编译器兼容性来说,WebKit显然更好。

二、调用方法

1. 第一个WebEngine程序

启动一个Web页面的方法很简单,与WebKit基本一致。

#include <QApplication>
#include <QWebEngineView>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QWebEngineView * pv = new QWebEngineView();
    pv->setUrl(QUrl("http://www.baidu.com"));
    pv->show();
    return a.exec();
}

2. 打开一个调试页面

我们可以通过简单的语句,直接开启开发者模式。

#include <QApplication>
#include <QWebEngineView>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QWebEngineView * pdev = new QWebEngineView();
    pdev->show();

    QWebEngineView * pv = new QWebEngineView();
    pv->setUrl(QUrl("http://www.baidu.com"));
    pv->show();
    pv->page()->setDevToolsPage(pdev->page());
    return a.exec();
}

上述程序会直接开启开发者模式。在开发者模式下,可以运行JS脚本。
开发者模式

3. 详细范例:simplebrowser

详细的范例可以参考官方的例子,simplebrowser。
调用JS脚本可以直接运行

view()->page()->runJavaScript("a = 12;");

但若获取返回值,则是异步过程。

page()->runJavaScript("document.title", [](const QVariant &v) { qDebug() << v.toString(); });

更重要的是,似乎在页面没有加载完毕前,很多脚本无法正确运行。

三、发布

QWebKit与QWebEngine的发布都很麻烦,在windows下,都需要依赖 windeployqt.exe
把自己的程序拷贝到一个空文件夹下,而后运行

D:\TEST>windeployqt  firstWebEngine.exe

会拷贝所有的文件到文件夹。

Adding Qt5Svg for qsvgicon.dll
Adding Qt5SerialPort for qtposition_serialnmea.dll
...
Direct dependencies: Qt5Core Qt5Widgets Qt5WebEngineWidgets
All dependencies   : Qt5Core Qt5Gui Qt5Network Qt5Positioning Qt5PrintSupport Qt5Qml Qt5Quick Qt5QuickWidgets Qt5Widgets Qt5WebEngineCore Qt5WebEngineWidgets Qt5WebChannel
To be deployed     : Qt5Core Qt5Gui Qt5Network Qt5Positioning Qt5PrintSupport Qt5Qml Qt5Quick Qt5QuickWidgets Qt5SerialPort Qt5Svg Qt5Widgets Qt5WebEngineCore Qt5WebEngineWidgets Qt5WebChannel
...

注意的是,QtWebEngine依赖一个单独的进程文件,QtWebEngineProcess.exe
也需要再次运行一次

D:\TEST>windeployqt  QtWebEngineProcess.exe

确保依赖性。 发布包总共高达162MB,还是非常的恐怖!

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。
公众号推荐
   一个健康类的公众号,欢迎关注
小青桔健康