【QT进阶】Qt Web混合编程之CEF、QCefView简单介绍

往期回顾

【QT入门】Qt自定义控件与样式设计之自定义QLineEdit实现搜索编辑框-CSDN博客

【QT入门】Qt自定义控件与样式设计之自定义QTabWidget实现tab在左，文本水平的效果-CSDN博客

【QT进阶】Qt Web混合编程之CEF、QCefView简单介绍

一、web组件

Web组件是一种用于构建Web应用程序的独立、可重用的元素。它们通常包含了HTML、CSS和JavaScript代码，用于实现特定的功能或展示特定的内容。Web组件有助于将Web应用程序拆分成更小的、可维护的部分，提高了代码的可读性、可维护性和复用性。

常见特点：

|-------|---------------------------------------------------------|
| 独立性： | Web组件是独立的元素，可以在不同的页面或应用程序中重复使用，从而减少重复编写代码的工作量。 |
| 封装性： | Web组件将HTML、CSS和JavaScript封装在一起，形成一个独立的单元，有助于减少代码之间的耦合性。 |
| 可定制性： | Web组件通常提供了一些接口或属性，允许开发者根据需要进行定制和配置，以适应不同的使用场景。 |
| 互动性： | Web组件可以包含交互式的元素和功能，使用户能够与页面进行交互，提升用户体验。 |

目前来说，绝大多数web技术都是基于chrome，例如CEF、QCefView以及QWebEngineView等,这些都是在native界面里用来显示html网页，并且可以与web交互，例如常见的登录窗口，优酷的视频区域、WPS的稻壳商城等，这些都是用web技术实现的，而native端，只需要把网页展示出来，实现交互即可。

二、CEF (Chromium Embedded Framework)

cef是一个开源项目，提供了一个基于Chromium内核的嵌入式浏览器框架，可以让开发者在自己的应用程序中集成浏览器功能。

CEF提供了一种简单的方式来展示网页内容，并且支持JavaScript、HTML5、CSS、SVG等现代Web技术。CEF提供了许多方便的API，使开发者可以轻松地实现浏览器功能，比如加载网页、JavaScript 执行、Cookie 管理等。

后面我们将详细介绍cef在vs2019中的编译与使用。

三、QCefView

QCefView 是一个基于 CEF 的 Qt 框架的封装库，可以让开发者在Qt应用程序中集成Chromium 内核的浏览器功能。QCefView提供了一些方便的接口和工具，使得在Qt程序中嵌入浏览器变得更加简单。

在使用QCefView时，开发者可以利用Qt的强大功能和CEF的浏览器引擎，快速地开发出具有浏览器功能的应用程序，比如内置浏览器、在线帮助文档、网页编辑器等。通过使用QCefView，开发者可以更加轻松地实现复杂的浏览器功能，同时保持Qt应用程序的整体风格和一致性。

示例：

我们在本示例中创建一个QWidget作为主窗口，然后创建一个QCefView对象，并加载百度网页。最后将QCefView添加到主窗口中，并显示主窗口。

复制代码

#include <QApplication>
#include <QWidget>
#include "qcefview.h"

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // 创建一个 QWidget 作为主窗口
    QWidget window;
    window.setWindowTitle("QCefView Example");
    window.resize(800, 600);

    // 创建一个 QCefView 对象
    QCefView cefView(&window);
    cefView.loadUrl("https://www.baidu.com");

    // 将 QCefView 添加到主窗口中
    QVBoxLayout layout(&window);
    layout.addWidget(&cefView);

    window.show();

    return app.exec();
}

以上就是CEF、QCefView的简单介绍。

都看到这里了，点个赞再走呗朋友~

加油吧，预祝大家变得更强！