Qt-Web混合开发-QWebEngineView加载网页最小示例💥

文章目录

Qt-Web混合开发-QWebEngineView加载网页最小示例💥
- 1、概述💯
- 2、实现效果💦
- 3、实现功能💬
- 4、关键代码💤
- 5、源代码🙈

更多精彩内容
👉个人内容分类汇总 👈
👉Qt - Web混合开发👈

1、概述💯

Qt版本：V5.12.5
注意：windows下webenginewidgets只支持MSVC编译器，不支持MinGW（mingw好像需要自己编译）；
什么是Qt WebEngine（除了QtWebEngine外，也可以使用其它浏览器内核进行混合开发，例如cef、miniblink）
1. Qt WebEngine模块是Qt提供了一个 Web 浏览器引擎，可以轻松地将Web网页中的内容嵌入到没有本机 Web 引擎的平台上的 Qt 应用程序中；
2. QtWebEngine提供C++类和QML类型，用于呈现HTML、XHTML和SVG文档，使用级联样式表（CSS）进行样式设置，并使用JavaScript编写脚本；
3. 通过使用HTML元素上的属性，用户可以完全编辑HTML文档；
4. Qt WebEngine是基于Chromium浏览器引擎实现的；
5. 我使用的是Qt5.12.5版本，这个版本的Qt WebEngine基于Chromium版本69.0.3497.128，目前github上最新的chromium版本是110.0.5473.0，而69.0.*版本是18年的时候出的，现在比较老了；
为什么要使用QtWebEngine
1. 使用html + css + JavaScript 可以很轻松的开发出精美的界面、动画效果，而如果使用Qt C++非常难实现；
2. 可以直接使用很多js的库，例如ECharts，可以实现非常多的精美图表；
3. web开发天然跨平台，更适合跨平台开发；
Qt + web混合开发缺点
1. 对于需要频繁绘制，高刷新率的界面，web界面的性能还是要低于C++；
2. QtWebEngine目前感觉不太稳定，教程出现背景黑屏、闪屏、鼠标坐标混乱等问题（大部分是系统显卡驱动过低导致的）；

2、实现效果💦

在这里插入图片描述

3、实现功能💬

使用QWebEngineView加载显示Web页面的最小示例;
保留最简单功能，去掉不易于理解的功能；
分别演示了加载网络地址、资源文件中的Html文件，本地html的方式；
详细的注释，对初学者更友好。

4、关键代码💤

pro文件

QT += webenginewidgets    # 使用QWebEngineView需要加载模块

hello.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本地Html文件</title>
</head>
<body>

<h1 align="center" style="font-size:80px; color:red;">hello </h1>
<p align="center" style="font-size:70px; color:blue;">world</p>

</body>
</html>

main.cpp

#include <QApplication>
#include <QDir>
#include <QWebEngineView>

#define DEMO 0    // 通过修改DEMO值 为0、1、2使用不同的演示代码

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);  // 在支持的平台上启用Qt中的高DPI缩放
    QApplication a(argc, argv);

    QWebEngineView view;  // 创建一个用于加载显示、编辑Web页面的Widget
    view.setWindowTitle(QString("QWebEngineView最小示例 - V%1").arg(APP_VERSION));  // 设置窗口标题
    // 使用setUrl和load都一样
#if DEMO == 0
    view.setUrl(QUrl("https://www.baidu.com"));      // 网址：原文中使用QStringLiteral("https://www.qt.io")创建，但是这里只是创建一次，没必要
#elif DEMO == 1
    view.setUrl(QUrl("qrc:/hello.html"));            // 资源文件：如果html文件在资源文件中，这里【qrc】不能少
#elif DEMO == 2
    view.setUrl(QDir("hello.html").absolutePath());  // 当前路径：如果html文件不在资源文件中，这里需要使用【绝对路径】
#endif

    view.resize(1024, 750);
    view.show();

    return a.exec();
}

5、源代码🙈

gitee
github

◽️◽️◽️◽️◽️◽️◽️◽️◽️⬛⬛⬛◽️◽️◽️◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️◽️◽️⬛🟩🟩🟩⬛◽️◽️◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️◽️◽️⬛⬛⬛⬛⬛◽️◽️◽️◽️◽️◽️◽️◽️
◽️◽️⬛⬛⬛⬛◽️⬛🟨🟨🟨🟨🟨⬛◽️⬛⬛⬛⬛◽️◽️
◽️⬛🟨🟨🟨🟨⬛🟨🟧🟨🟨🟨🟧🟨⬛🟨🟨🟨🟨⬛◽️
◽️⬛🟧🟨🟨🟧🟨🟧🟨🟨🟧🟨🟨🟧🟨🟧🟨🟨🟧⬛◽️
⬛🟧🟨🟨🟧🟨⬛🟨🟧🟧🟧🟧🟧🟨⬛🟨🟧🟨🟨🟧⬛
⬛🟧🟧🟧🟨⬛⬛⬛🟧🟧🟧🟧🟧⬛⬛⬛🟨🟧🟧🟧⬛
⬛🟧🟧🟧🟨⬛⬛⬛🟧🟧🟧🟧🟧⬛⬛⬛🟨🟧🟧🟧⬛
⬛🟧🟧🟧🟨⬛⬛⬛🟧🟧🟧🟧🟧⬛⬛⬛🟨🟧🟧🟧⬛
⬛🟧🟧🟧🟧🟧⬛🟧🟧🟨🟨🟨🟧🟧⬛🟧🟧🟧🟧🟧⬛
⬛🟧🟧🟧🟨🟨🟧🟧🟨⬛⬛⬛🟨🟧🟧🟨🟨🟧🟧🟧⬛
⬛🟧🟧🟨⬛⬛🟧🟧🟧🟧⬛🟧🟧🟧🟧⬛⬛🟨🟧🟧⬛
⬛🟧🟧🟨⬛🟨🟧🟨🟧🟨🟧🟨🟧🟨🟧🟨⬛🟨🟧🟧⬛
◽️⬛🟧🟨⬛⬛🟨⬛🟨⬛🟨⬛🟨⬛🟨⬛⬛🟨🟧⬛◽️
◽️⬛🟧🟧🟧🟧⬛⬛⬛⬛⬛⬛⬛⬛⬛🟧🟧🟧🟧⬛◽️
◽️◽️⬛⬛🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧⬛⬛◽️◽️
◽️◽️◽️◽️⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️⬛🟪⬛🟪⬛🟪⬛🟪⬛◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️⬛🟪🟪⬛🟪🟪🟪⬛🟪🟪⬛◽️◽️◽️◽️◽️
◽️◽️◽️◽️⬛🟪🟪⬛🟪🟪🟪🟪🟪⬛🟪🟪⬛◽️◽️◽️◽️
◽️◽️◽️⬛🟪🟪🟪⬛🟪🟪🟪🟪🟪⬛🟪⬛🟨⬛◽️◽️◽️
◽️◽️◽️⬛⬛🟪⬛🟪🟪🟪🟪🟪🟪🟪⬛🟧🟧🟨⬛◽️◽️
◽️◽️◽️◽️⬛⬛⬛🟪🟪🟪🟪🟪🟪⬛🟨🟧🟧⬛◽️◽️◽️
◽️◽️◽️◽️◽️◽️⬛🟪🟪🟪🟪🟪🟪🟪⬛🟨⬛◽️◽️◽️◽️
◽️◽️◽️◽️◽️⬛🟪🟪🟪🟪🟪🟪🟪🟪🟪⬛◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️⬛🟪🟪🟪🟪🟪🟪🟪🟪🟪⬛◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️⬛⬛⬛⬛⬛⬛⬛⬛⬛◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️◽️◽️⬛⬛◽️⬛⬛◽️◽️◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️◽️◽️⬛⬛◽️⬛⬛◽️◽️◽️◽️◽️◽️◽️◽️
🟪🟪🟪🟪🟪🟪🟪🟪⬛◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️⬛⬛⬛⬛⬛⬛⬛⬛⬛◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️◽️◽️⬛⬛◽️⬛⬛◽️◽️◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️◽️◽️⬛⬛◽️⬛⬛◽️◽️◽️◽️◽️◽️◽️◽️