QT_QWebEngineView_自制浏览器_01

0 .需求

• 打开固定的站点网页，并能够正常浏览
• 能打开本地的单页面HTML5应用（Vue），能够跨域发送Ajax请求到API接口获取数据
• 拦截所有HTTP请求，请求发送之前添加自定义的请求头
• JavaScript 与本地代码相互通信

比较简单的方案是 Electron， 使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架。它可以完美解决上面所有问题。但是用它打包出来的应用体积过大。

这里本着学习的态度，使用QT中的 QWebEngineView 来实现上面的需求。它与Electron一样，是基于Chromium引擎的，也就是集成谷歌的引擎。看看如何使用QT 来打造一个自己定制的浏览器外壳，加载自己的web应用，解决浏览器兼容的尴尬问题。

有了这个外壳，就可以用 HTML+CSS+JavaScript 来编写应用界面，而且还可以与操作系统通信。

1. 环境准备

QWebEngineView 只支持 MSVC编译器，mingw不支持。我安装的组件：

在QT安装目录/msvc2019_64/include 目录中 能够找到 QtWebEngineWidgets 这个文件夹，这说明可以使用msvc2019 来开发这个自定义的浏览器。

安装一个 Visual Studio Professional 2019 ，不用全部安装，只需要安装 “使用C++的桌面开发”：

2. QWebEngineView 类

查看该类的文档说明:

Header:	#include
qmake:	QT += webenginewidgets
Since:	Qt 5.4
Inherits:	QWidget

它是一个QWidget，可以查看和编辑网页内容，它提供了一个load方法可以加载url。

3. 最简单的浏览器

新建项目，整个项目只有两个文件

• MyBrowser.pro 工程文件
• main.cpp 入口

3.1 引入库

MyBrowser.pro 文件中加入 webenginewidgets 库

QT       += core gui webenginewidgets

3.2 main.cpp

#include <QApplication>
// 引入头文件
#include <QWebEngineView>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    // 浏览器窗体对象
    QWebEngineView w;
    // 加载CSDN首页
    w.load(QUrl("https://www.csdn.net"));
    w.resize(1024,768);
    w.setWindowTitle("自定义浏览器");
    w.show();
    return a.exec();
}

使用Debug启动

发现了两个问题：

1. 标题出现了乱码
2. 加载网页非常缓慢

3.3 解决中文问题

在main.cpp 源代码文件中加入 预编译指令。

#pragma execution_character_set("utf-8")

每次敲入这段代码很麻烦，可以在 QT Creater 开发工具内配置代码片段：

工具=》选项=》文本编辑器=》片段=》组，选择C++。

点击右侧的“添加”按钮，在左侧表格中新增了空白行

代码中输入 encode,然后tab就直接输入了。

main.cpp完整代码如下：

#pragma execution_character_set("utf-8")
#include <QApplication>
// 引入头文件
#include <QWebEngineView>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    // 浏览器窗体对象
    QWebEngineView w;
    // 加载CSDN首页
    w.load(QUrl("https://www.csdn.net"));
    w.resize(1024,768);
    w.setWindowTitle("自定义浏览器");
    w.show();
    return a.exec();
}

3.4 加载网页缓慢

在debug模式下，会看到大量的日志输出。切换成 Release 模式后，输出日志减少，加载速度明显提升。

3.5 点击链接跳转问题

还有一个问题是：当点击页面链接的时候，页面并没有正常跳转，这个问题下个章节通过封装QWebEngineView 来解决。