QT网页 webengine / CEF

news2024/12/24 3:24:15

QT + WebEngine

官方文档

WebEngine 架构：

在这里插入图片描述

能看到 WebEngine 有一个核心模块是基于 Chromium 构造的，通过使用 Chromium 的Blink渲染引擎和V8 JavaScript引擎来处理和渲染Web内容，并将这些底层技术封装为一系列高级的C++类和接口，以便开发者可以将Web内容嵌入到Qt应用程序中。

  1. WebEngine Widgets 模块：主要是针对于桌面应用，提供了用于将Web内容嵌入到Qt应用程序中的窗口和小部件, 可以用于各种应用程序来加载web内容。
    在这里插入图片描述

主要架构如上图所示，主要提供了一些组件:

  • QWebEnginePage：一个代表Web页面的类，它包含了页面的内容、状态和功能。它可以执行JavaScript代码、处理表单、捕获页面截图等。
  • QWebEngineView：一个用于展示Web页面的小部件，它是QWebEnginePage的可视化容器。它可以加载URL、导航历史、缩放页面等。
  • QWebEngineProfile：一个表示浏览器配置文件的类，它包含了缓存、Cookie和安全策略等设置。它可以用于实现多用户浏览器或隐私浏览功能。
  • QWebEngineSettings：一个表示浏览器设置的类，它包含了字体、颜色、JavaScript和插件等选项。它可以用于调整页面的渲染效果和功能。
  • QWebEngineScript：执行 JavaScript 脚本的类，用于向网页中注入并执行自定义的 JavaScript 脚本来添加新功能或修改现有的功能。
  • QWebEngineHistory：管理浏览历史的类，它提供了对浏览历史记录的访问和操作，其中每个历史记录项都由 QWebEngineHistoryItem 类表示。
  • WebEngineAction：表示对网页的操作，由WebEngineView::action()方法返回，包含相关的一些信息；

一个QWebEngineView 实例有一个 QWebEnginePage. QWebEnginePage有一个QWebEngineHistory和一些用于操作页面的QAction对象。每一个QWebEnginePage都属于一个QWebEngineProfile, QWebEngineProfile有一个页面设置的QWebEngineSettings, 一个在页面上运行脚本的QWebEngineScriptCollection, 一个访问HTTP cookies的QWebEngineCookieStore。

  1. WebEngine 模块：主要是针对用于QML。
    Qt WebEngine 除了没有单独访问的web引擎页面，包含的其他组件与Qt WebEngine Widgets相同，功能也是一致的。

  2. WebEngine Process：这是可执行文件，对应的是一个独立的用于渲染网页和执行JavaScript进程，用于增强安全性与内存隔离。
    网上有文章说“每个QWebEngineView或WebEngineView实例都会启动一个QtWebEngineProcess.exe进程”，在View对象过多的情况下会导致内存占用；
    但是在官方文档里没有找到相关描述，这个问题暂时未能确定；

  3. WebEngine 对 AMD 显卡支持性不好，在某些A系显卡下会显示不出来甚至闪退； 后续优化计划目前还没在网上搜到；另外嵌入的网页无法播放视频，要播放视频的话需要下载QT源码自己设置编译参数集成视频播放库；

  4. 对显卡有依赖，基于openGL，看网上说如果在显卡和显卡驱动不一致或是旧版版本下还有openGL，程序有可能出异常

QT 与 网页通信

  1. 通过 WebEnginePage 与网页通信
    通过 WebEngine 嵌入网页的方式与网页端的JS交互很容易，QWebEnginePage 自带了一个函数为 runJavaScript ，这个函数可以直接通知 JS 执行指定的函数，
    void QWebEnginePage::runJavaScript(const QString &scriptSource, const std::function<void (const QVariant &)> &resultCallback)

例如这个接口，第一个参数就是要调用的接口以及参数拼成的字符串，第二个参数是对应的回调。
这种方式用起来很方便，但是是单向的

  1. QWebChannel 双向通信
    QT提供了一种通道机制，可以让 JS 与 QT 通过对象建立连接， 然后进行通信；
    QWebChannel 提供了在 QT 和 HTML/JS 之间点对点的通信能力，通过向 HTML/JS 端的 QWebChannel 发布 QObject 的 派生对象，进而实现在 HTML/JS 端可以同步读取来自 Qt 端的 公共插槽 和 QObject 的 属性值 和 方法。在整个通信过程中，无需任何手动序列化传入的参数。所有 Qt 端的数据更新，都会自动且异步的触发 signal 并更新到 client 端。这个机制一般被称为对象模型，QObject 是这个模型的核心，而模型实现的基础就是靠的 QT 的 signal 和 slot 也就是信号槽机制。

这个机制主要分以下几步：

  • QT端 创建 HTML/JS 网页
  • JS端 创建 channel 对象，通过 channel 取到通信对象 QObject;
  • QT端 创建 channel 对象与通信用的 QObject 对象；
  • QT端 channel 与 网页对应的 QWebEngineView 绑定；
  • QT端 将 channel 与 QObject 对象绑定；
  • QT端/JS端 修改QObject属性，另一端对应的监听函数响应；

WebEngine 网页示例

源码见 QTWebtest_WebEngine
在示例代码里，我写了一个中间类名为 JS2QTBridge， 里面定义了两个字符串 m_jscontent 与 m_content；
通过 channel 将这个对象对 JS 与 QT 双向绑定，网页/QT界面上显示内容发生改变时给 QT/JS 发送对应信号，实现效果如：
在这里插入图片描述

其中在QT上点击按钮通知网页画图是用 runJavaScript 方法实现；
在网页点击饼图在QT弹出提示是通过调用 bridge 对象的函数实现；
两边输入框修改另一侧的显示区域一同变化是通过对 bridge 对象的成员变量与界面控件信号槽绑定实现；

QT + cef

CEF3使用多个进程运行。处理窗口创建、绘制和网络访问的主要进程称为浏览器进程，通常与宿主应用程序的进程相同，大多数应用程序的逻辑将在浏览器进程中运行。使用Blink引擎渲染HTML和JavaScript在单独的渲染进程中，相关的应用程序逻辑（如JavaScript绑定和DOM访问）将在渲染进程中运行。默认进程模型将为每个唯一源地址（scheme+domain）运行一个新的渲染进程。其他进程将根据需要生成，例如处理Flash等插件的插件进程和处理加速合成的GPU进程。另外浏览器进程中会进行窗口绘制，不是绘制HTML内容，而是承载网页内容的那个窗体，渲染进程则不会用来创建窗体。

<！-- 编译CEF参考 cef.md – >
cef解决方案中有多个工程：

  • ALL_BUILD与ZERO_CHECK：是cmake自动生成的辅助工程。
  • cef_gtest与ceftests：都是测试模块,这里不关心。
  • cefclient：一个包含CEF各种API演示的浏览器程序Demo。
  • cefsimple：一个简单的CEF浏览器程序Demo。
  • libcef_dll_wrapper：对libcef库的C++代码封装。上述cefclient与cefsimple都会用它。

可以移植 cefsimple 来实现一个简单的浏览器程序：

  • simple_app.h、simple_app.cc、simple_handler.h、simple_handler.cc 这四个文件拷到QT工程中；
  • simple_handler.h中的 PlatformTitleChange 定义注释掉；simple_handler.cc 的 OnTitleChange 对这个函数的调用也注释掉；
  • CEF.lib等相关库 以及 libcef_dll_wrapper.lib 拷贝到工程中，链接到QT工程里；
  • CEF的include文件夹拷贝到QT工程位置并引入；
  • CEF的 Resources 中的五项拷贝到QT编译出来的EXE的环境里；这些是网页渲染引擎需要的资源，不打包过去程序运行时会报错：icu_util.cc(224)] Invalid file descriptor to ICU data received.

QT 与 CEF 嵌入的网页通信有两种方式；

1. 使用 QWebChannel

这种方法与上面使用 webengine 时类似, 在QT 与 JS中声明channel, 通过将这个channel对象来作为中间通信的桥梁；
这种方式有一个优点是，可以通过 websocket 来让 Channel 监听指定的IP和端口来实现远程通信，而不仅仅局限于QT与它启动的web子进程；

2. 通过 CefRenderProcessHandler 的方法回调传递

  • virtual void OnWebKitInitialized() {}
    当 webkit 初始化完毕之后。在这个函数中，可以通过 CefRegisterExtension() 函数来注册JavaScript与C++代码之间的“映射”关系，官方管这种方式叫做扩展(Extension)

  • virtual void OnContextCreated(CefRefPtr browser, CefRefPtr frame, CefRefPtr context) {}
    JavaScript 上下文被创建以后，在这个函数中，可以为JavaScript中的 window 对象绑定属性和方法，官方将这种方式叫做 窗口绑定(window binding)

3. CEF网页通信示例

源码见 QTWebtest_CEF
在示例代码里，我写了一个网页，将这个网页用CEF展示在了QT窗口中，然后另外打开了一个QT对话框；
通过 channel 来在网页与对话框之间发送信息，展示效果如下：
在这里插入图片描述

CEF使用的一些问题：
不支持视频，需要自编译源码；原生的CEF是纯C代码，libcef_dll_wrapper才是在CEF的基础上封装的C++ API；
很大，我使用的版本的 libcef.dll 164MB， libcef_dll_wrapper.lib 33MB ，还有一些相关的加一起超200MB；
MD/MT属性支持的不好，CEF工程默认使用的是MT，其中用到的一些依赖库如cef_sandbox.lib都是MT编译的，使用MD编译会报错，要是改成MD需要自己下载相关源码编译；
多进程架构，WebEngine应该是一个view一个进程，如果只有一个view然后路径切换不会增加新的进程，CEF应该是每打开一次网页就会创建一个渲染进程；

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1006571.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

JVM基础-Hotspot VM相关知识学习

JVM基础-Hotspot VM相关知识学习

这里写目录标题 jdkJVM虚拟机类类的生命周期类加载的时机类的双亲委派机制类的验证 java对象Mark WordKlass Pointer实例数据对齐数据 字符串常量池垃圾收集器1.Serial收集器&#xff08;串行收集器&#xff09;cms垃圾算法G1垃圾收集器与CMS收集器相比, G1收集器的优势:G1收集…
阅读更多...
开利网络到访东家集团，沟通招商加盟数字化机制落地事项

开利网络到访东家集团，沟通招商加盟数字化机制落地事项

近日&#xff0c;开利网络到访东家集团&#xff0c;就集团近日开展的奖金池激励制度的推进情况和市场反馈进行复盘与沟通。通过打破“层层中间商”&#xff0c;提供厂家直供价格的方式&#xff0c;东家集团推出了数字化激励机制&#xff0c;消费集团会员礼包即可在会员专区进行…
阅读更多...
Layui快速入门之第五节 导航

Layui快速入门之第五节 导航

目录 一&#xff1a;基本概念 导航依赖element模块 API 渲染 属性 事件 二&#xff1a;水平导航 常规用法&#xff1a; 三&#xff1a;垂直导航 四&#xff1a;侧边垂直导航 五&#xff1a;导航主题 六&#xff1a;加入徽章等元素 七&#xff1a;面包屑导航 ps&a…
阅读更多...
大学经典题目：Java输出杨辉三角形

大学经典题目：Java输出杨辉三角形

本节利用​ 过 Java 语 ​言中的流程控制语句&#xff0c;如条件语句、循环语句和跳转语句等知识输出一个指定行数的杨辉三角形。 杨辉三角形由数字进行排列&#xff0c;可以把它看作是一个数字表&#xff0c;其基本特性是两侧数值均为 1&#xff0c;其他位置的数值是其左上方数…
阅读更多...
Kettle——大数据ETL工具

Kettle——大数据ETL工具

文章目录 ETL一、Kettle二、安装和运行Kettle三、Kettle使用四、Kettle核心概念可视化转换步骤跳 ETL ETL(Extract-Transform-Load&#xff0c;即数据抽取、转换、转载)&#xff0c;对于企业或行业应用来说&#xff0c;我们经常会遇到各种数据的处理&#xff0c;转换&#xff…
阅读更多...
【操作系统】进程的概念、组成、特征

【操作系统】进程的概念、组成、特征

概念组成 程序&#xff1a;静态的放在磁盘&#xff08;外存&#xff09;里的可执行文件&#xff08;代码&#xff09; 作业&#xff1a;代码&#xff0b;数据&#xff0b;申请&#xff08;JCB&#xff09;&#xff08;外存&#xff09; 进程&#xff1a;程序的一次执行过程。 …
阅读更多...
5. 自动求导

5. 自动求导

5.1 向量链式法则 ① 例子1是一个线性回归的例子&#xff0c;如下图所示。 5.2 自动求导 5.3 计算图 5.4 两种模型 ① b是之前计算的结果&#xff0c;是一个已知的值。 5.5 复杂度 5.6 自动求导 import torch x torch.arange(4.0) x 结果&#xff1a; ② 在外面计算y关于x的…
阅读更多...
linux 用户、组操作

linux 用户、组操作

一、创建用户并设置密码 #创建用户 duoergun useradd duoergun #设置用户 duoergun 密码 passwd duoergun二、创建组 #创建组 qingdynasty groupadd qingdynasty三、用户添加到组&#xff0c;用户从组删除 #添加用户duoergun到组qingdynasty usermod -aG qingdynasty duoer…
阅读更多...
【CSS】React项目如何在CSS样式文件中使用变量

【CSS】React项目如何在CSS样式文件中使用变量

需求 在修改样式时候&#xff0c;需要根据不同条件&#xff0c;使用不同的样式&#xff0c;使用动态类需要多重判断&#xff0c;是否考虑使用变量传入的方式呢 应该怎么做 tsx import ./App.css; import ./test.cssfunction App() {const styles {--var: white,};return (…
阅读更多...
20230912java面经整理

20230912java面经整理

1.gc算法有哪些 引用计数&#xff08;循环引用&#xff09;和可达性分析找到无用的对象 标记-清除&#xff1a;简单&#xff0c;内存碎片&#xff0c;大对象找不到空间 标记-复制&#xff1a;分成两半&#xff0c;清理一半&#xff0c;没有碎片&#xff0c;如果存活多效率低&a…
阅读更多...
Bigemap 在土地图利用环境生态行业中的应用

Bigemap 在土地图利用环境生态行业中的应用

工具 Bigemap gis office地图软件 BIGEMAP GIS Office-全能版 Bigemap APP_卫星地图APP_高清卫星地图APP Bigemap 在土地图利用环境生态行业中的应用  使用场景 &#xff1a; 1. 土地利用占地管理&#xff1a; 核对数据&#xff0c;查看企业的实际占地是否超出宗地&…
阅读更多...
电商运营管理——广告系统

电商运营管理——广告系统

广告位对于电商平台而言&#xff0c;具有非常重要的作用。如何设计一个广告位是本篇文章重点讲述的内容&#xff0c;作者从六个方面出发&#xff0c;系统地介绍该如何去搭建一个广告位&#xff0c;能为产品设计的同学提供一些思路。 对于电商平台&#xff0c;广告位无论是对产品…
阅读更多...
制造业企业使用哪种ERP系统好？金蝶还是用友？

制造业企业使用哪种ERP系统好？金蝶还是用友？

制造业企业使用哪种ERP系统好&#xff1f;金蝶还是用友&#xff1f; 综合来看&#xff0c;这几位都算是是典型的ERP软件&#xff0c;它有着ERP软件应该有的基础功能&#xff0c;并且做的也比较成熟。下面是本文对这几个软件的总结 金蝶&#xff1a; 优势&#xff1a;1.产品丰…
阅读更多...
mysql逻辑备份和恢复

mysql逻辑备份和恢复

备份恢复指令 1 全备 &#xff08;变量为密码、端口号、输出路径。 --compress支持压缩&#xff09; mysqldump -uroot -p*** -P*** --single-transaction --master-data2 --flush-logs --hex-blob --flush-privileges --triggers --routines --events --all-databases > …
阅读更多...
【100天精通Python】Day61：Python 数据分析_Pandas可视化功能：绘制饼图，箱线图，散点图，散点图矩阵，热力图，面积图等（示例+代码）

【100天精通Python】Day61：Python 数据分析_Pandas可视化功能：绘制饼图，箱线图，散点图，散点图矩阵，热力图，面积图等（示例+代码）

目录 1 Pandas 可视化功能 2 Pandas绘图实例 2.1 绘制线图 2.2 绘制柱状图 2.3 绘制随机散点图 2.4 绘制饼图 2.5 绘制箱线图A 2.6 绘制箱线图B 2.7 绘制散点图矩阵 2.8 绘制面积图 2.9 绘制热力图 2.10 绘制核密度估计图 1 Pandas 可视化功能 pandas是一个强大的数…
阅读更多...
在 Python 中实现 DBSCAN

在 Python 中实现 DBSCAN

一、说明 DBSCAN&#xff08;Density-Based Spatial Clustering of Applications with Noise&#xff09;聚类是一种基于密度的聚类算法。它能够根据数据点的密度来将数据划分为不同的类别&#xff0c;并可以自动识别离群点。DBSCAN聚类算法的核心思想是将密度高的数据点划分为…
阅读更多...
MacVim for Mac：强大的文本编辑器，提升你的编程体验

MacVim for Mac：强大的文本编辑器，提升你的编程体验

在Mac上&#xff0c;有这样一款独特的文本编辑器——MacVim for Mac&#xff0c;它以其强大的功能和出色的性能&#xff0c;吸引了广大的程序员和编程爱好者。这款编辑器不仅继承了Unix编辑器Vi的强大功能&#xff0c;更通过创新的设计和功能拓展&#xff0c;提供了一款更完整、…
阅读更多...
批量上传文件，以input上传文件，后端以List＜MultipartFile＞类型接收

批量上传文件，以input上传文件，后端以List＜MultipartFile＞类型接收

批量上传文件&#xff0c;以input上传文件&#xff0c;后端以List类型接收 一、后端接口二、前端对接三、测试 最近公司要求要做一个批量上传文件的功能&#xff0c;以往做的导入Excel表格、上传图片都是上传一个文件的&#xff0c;此次在开发的过程中着实让我犯了难&#xff0…
阅读更多...
vue Echarts饼图指定颜色与数据对应

vue Echarts饼图指定颜色与数据对应

需求&#xff1a;一般自定义颜色是按照数据的顺序依次对应&#xff0c;现在想要指定字段对应某个颜色 因为是直接在返回数据中做操作&#xff0c;所以直接写这部分的代码 数据格式 cdata: {xData: ["水文", "森林", "气象", "地质",…
阅读更多...
学习笔记|外部中断|INT0|中断列表|STC32G单片机视频开发教程（冲哥）|第十五集：中断系统和外部中断

学习笔记|外部中断|INT0|中断列表|STC32G单片机视频开发教程（冲哥）|第十五集：中断系统和外部中断

文章目录 1.中断和中断系统1.1什么是中断?1.2什么是中断系统1.3中断系统的优点1.4 中断系统包含哪些中断源1.5.中断次序 2.什么是外部中断3.外部中断的用法4.外部中断的用法完整代码 总结课后练习: 上节课我们学完了GPIO的矩阵按键&#xff0c;已经把这个GPIO的一个外设全都已…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023