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

文章目录

Qt-Web混合开发-QWebEngineView加载网页最小示例 2🌍
- 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页面的最小示例;
保留最简单功能，去掉不易于理解的功能；
分别演示了【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();
}