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

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等需求。

（2）桌面应用的类结构

（3）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();
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

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();
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

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

3. 详细范例：simplebrowser

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

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

• 1

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

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

• 1

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

三、发布

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

D:\TEST>windeployqt  firstWebEngine.exe

• 1

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

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
...

• 1
• 2
• 3
• 4
• 5
• 6
• 7

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

D:\TEST>windeployqt  QtWebEngineProcess.exe

• 1

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