Qt-Web混合开发-QWebEngineView加载网页最小示例（2） 原创
Qt-Web混合开发-QWebEngineView加载网页最小示例 2🌍
| 更多精彩内容 |
|---|
| 👉个人内容分类汇总 👈 |
| 👉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页面的最小示例;
- 保留最简单功能，去掉不易于理解的功能；
- 分别演示了【QWebEngineView::setHtml】【QWebEngineView::setContent】的使用方法；
- setHtml用法1：可直接显示html代码；
- setHtml用法2：使用参数2指定一个地址，在参数1的html中可使用相对路径引用参数2地址中的资源；
- setContent用法：setContent的使用和setHtml差不多，setHtml就是调用了setContent。
- 详细的注释，对初学者更友好。
4、关键代码🚚
- pro文件
QT += webenginewidgets # 使用QWebEngineView需要加载模块
- 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)); // 设置窗口标题
// setHtml内部调用的就是【setContent(html.toUtf8(), QStringLiteral("text/html;charset=UTF-8"), baseUrl);】
#if DEMO == 0
QString html("<h1 align='center' style='font-size:80px; color:red;'>hello </h1>");
view.setHtml(html); // 直接在QWebEngineView中显示Html代码
#elif DEMO == 1
// 百度搜索界面的图标地址 https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// setHtml使用参数2 (baseUrl)后，可以在html代码中使用【相对路径】引用baseUrl中的资源
QString html("<img src='/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'/>"); // 注意：字符串html不能超过2MB
view.setHtml(html, QUrl("https://www.baidu.com"));
#elif DEMO == 2
QString html("<h1 align='center' style='font-size:80px; color:red;'>hello </h1>");
view.setContent(html.toUtf8(), "text/html; charset=UTF-8");
#endif
view.resize(1024, 750);
view.show();
return a.exec();
}
5、源代码🚀
(\ /) (\ /)
(•ᴥ•) (´•ᴥ•`)
(ᐢ ᐢ) ❤️🔥~૮()૮ )o
