Qt-Web混合开发-QWebEngineView加载网页最小示例（1） 原创
Qt-Web混合开发-QWebEngineView加载网页最小示例💥
| 更多精彩内容 |
|---|
| 👉个人内容分类汇总 👈 |
| 👉Qt - Web混合开发👈 |
1、概述💯
-
Qt版本：V5.12.5
-
注意：windows下
webenginewidgets只支持MSVC编译器，不支持MinGW（mingw好像需要自己编译）； -
什么是Qt WebEngine（除了QtWebEngine外，也可以使用其它浏览器内核进行混合开发，例如cef、miniblink）
- Qt WebEngine模块是Qt提供了一个 Web 浏览器引擎，可以轻松地将Web网页中的内容嵌入到没有本机 Web 引擎的平台上的 Qt 应用程序中；
- QtWebEngine提供C++类和QML类型，用于呈现HTML、XHTML和SVG文档，使用级联样式表（CSS）进行样式设置，并使用JavaScript编写脚本；
- 通过使用HTML元素上的属性，用户可以完全编辑HTML文档；
- Qt WebEngine是基于Chromium浏览器引擎实现的；
- 我使用的是Qt5.12.5版本，这个版本的Qt WebEngine基于Chromium版本69.0.3497.128，目前github上最新的chromium版本是110.0.5473.0，而69.0.*版本是18年的时候出的，现在比较老了；
-
为什么要使用QtWebEngine
- 使用html + css + JavaScript 可以很轻松的开发出精美的界面、动画效果，而如果使用Qt C++非常难实现；
- 可以直接使用很多js的库，例如ECharts，可以实现非常多的精美图表；
- web开发天然跨平台，更适合跨平台开发；
-
Qt + web混合开发缺点
- 对于需要频繁绘制，高刷新率的界面，web界面的性能还是要低于C++；
- 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、源代码🙈
◽️◽️◽️◽️◽️◽️◽️◽️◽️⬛⬛⬛◽️◽️◽️◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️◽️◽️⬛🟩🟩🟩⬛◽️◽️◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️◽️◽️⬛⬛⬛⬛⬛◽️◽️◽️◽️◽️◽️◽️◽️
◽️◽️⬛⬛⬛⬛◽️⬛🟨🟨🟨🟨🟨⬛◽️⬛⬛⬛⬛◽️◽️
◽️⬛🟨🟨🟨🟨⬛🟨🟧🟨🟨🟨🟧🟨⬛🟨🟨🟨🟨⬛◽️
◽️⬛🟧🟨🟨🟧🟨🟧🟨🟨🟧🟨🟨🟧🟨🟧🟨🟨🟧⬛◽️
⬛🟧🟨🟨🟧🟨⬛🟨🟧🟧🟧🟧🟧🟨⬛🟨🟧🟨🟨🟧⬛
⬛🟧🟧🟧🟨⬛⬛⬛🟧🟧🟧🟧🟧⬛⬛⬛🟨🟧🟧🟧⬛
⬛🟧🟧🟧🟨⬛⬛⬛🟧🟧🟧🟧🟧⬛⬛⬛🟨🟧🟧🟧⬛
⬛🟧🟧🟧🟨⬛⬛⬛🟧🟧🟧🟧🟧⬛⬛⬛🟨🟧🟧🟧⬛
⬛🟧🟧🟧🟧🟧⬛🟧🟧🟨🟨🟨🟧🟧⬛🟧🟧🟧🟧🟧⬛
⬛🟧🟧🟧🟨🟨🟧🟧🟨⬛⬛⬛🟨🟧🟧🟨🟨🟧🟧🟧⬛
⬛🟧🟧🟨⬛⬛🟧🟧🟧🟧⬛🟧🟧🟧🟧⬛⬛🟨🟧🟧⬛
⬛🟧🟧🟨⬛🟨🟧🟨🟧🟨🟧🟨🟧🟨🟧🟨⬛🟨🟧🟧⬛
◽️⬛🟧🟨⬛⬛🟨⬛🟨⬛🟨⬛🟨⬛🟨⬛⬛🟨🟧⬛◽️
◽️⬛🟧🟧🟧🟧⬛⬛⬛⬛⬛⬛⬛⬛⬛🟧🟧🟧🟧⬛◽️
◽️◽️⬛⬛🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧⬛⬛◽️◽️
◽️◽️◽️◽️⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️⬛🟪⬛🟪⬛🟪⬛🟪⬛◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️⬛🟪🟪⬛🟪🟪🟪⬛🟪🟪⬛◽️◽️◽️◽️◽️
◽️◽️◽️◽️⬛🟪🟪⬛🟪🟪🟪🟪🟪⬛🟪🟪⬛◽️◽️◽️◽️
◽️◽️◽️⬛🟪🟪🟪⬛🟪🟪🟪🟪🟪⬛🟪⬛🟨⬛◽️◽️◽️
◽️◽️◽️⬛⬛🟪⬛🟪🟪🟪🟪🟪🟪🟪⬛🟧🟧🟨⬛◽️◽️
◽️◽️◽️◽️⬛⬛⬛🟪🟪🟪🟪🟪🟪⬛🟨🟧🟧⬛◽️◽️◽️
◽️◽️◽️◽️◽️◽️⬛🟪🟪🟪🟪🟪🟪🟪⬛🟨⬛◽️◽️◽️◽️
◽️◽️◽️◽️◽️⬛🟪🟪🟪🟪🟪🟪🟪🟪🟪⬛◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️⬛🟪🟪🟪🟪🟪🟪🟪🟪🟪⬛◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️⬛⬛⬛⬛⬛⬛⬛⬛⬛◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️◽️◽️⬛⬛◽️⬛⬛◽️◽️◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️◽️◽️⬛⬛◽️⬛⬛◽️◽️◽️◽️◽️◽️◽️◽️
🟪🟪🟪🟪🟪🟪🟪🟪⬛◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️⬛⬛⬛⬛⬛⬛⬛⬛⬛◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️◽️◽️⬛⬛◽️⬛⬛◽️◽️◽️◽️◽️◽️◽️◽️
◽️◽️◽️◽️◽️◽️◽️◽️⬛⬛◽️⬛⬛◽️◽️◽️◽️◽️◽️◽️◽️
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了