QCefView 简介

什么是QCefView

QCefView 是为 Qt 开发的一个封装集成了CEF(Chromium Embedded Framework)库的Wdiget UI组件。使用QCefView可以充分发挥CEF丰富强大的Web能力，快速开发混合架构的应用程序。它不需要开发者理解CEF的细节，能够在Qt中更容易的使用CEF，发挥CEF的能力。

它可以将网页轻松嵌入到Qt QWidget中，以Qt的开发逻辑来使用它，同时提供了方便直观的 JavaScript 与 C++ 互交互能力。所以，我们甚至可以直接以web的方式编写UI界面。

编译QCefView

首先，下载QCefView源代码：

git clone --recursive https://github.com/CefView/QCefView.git

在编译之前，先进行一些配置，修改根目录的CMakeLists.txt：

option(BUILD_DEMO "Build the demo" ON)

即将编译demo的选项打开

然后，设置Qt的路径，如果已将Qt设置为环境变量，则不用管。

修改QtConfig.cmake

set(QT_SDK_DIR# Change this value to the Qt SDK path of your build environment"D:/Qt/5.15.2/msvc2019_64"
)

修改Qt SDK 的路径，如这里的D:/Qt/5.15.2/msvc2019_64

Windows 平台编译

这里以 Clion IDE为例，介绍如何编译并运行QCefView的example

选中根目录的CMakeLists.txt，右键使用Clion打开

在这里插入图片描述

注意，Clion打开之后，配置的时候，工具链需要选择Visual Studio
在这里插入图片描述

然后运行的时候，会自动下载CEF的二进制分发包，如果要指定CEF的分支或版本，可在CefViewCore/CefConfig.cmake里修改。

注意，这里的格式为112.3.0+gb09c4ca+chromium-112.0.5615.165，即将文件名cef_binary_112.3.0+gb09c4ca+chromium-112.0.5615.165_windows64删除首尾的字符串。

同时，别忘了Clion配置需要选择QCefViewTest
在这里插入图片描述
在这里插入图片描述

Linux 平台编译

Linux平台可使用QtCreator打开CMakeLists.txt，这里直接使用CMake命令演示：

在QCefView根目录下，打开终端，运行：

cmake -B build -DCMAKE_BUILD_TYPE=Release
cmake --build -j10

然后即可在QCefView/build/example/QCefViewTest/output/Debug/bin路径下运行QCefViewTest程序

demo 讲解

这个QCefViewTest涉及的东西不少，依次讲解一番。

在这里插入图片描述

最左侧的这些按钮为Qt自带的控件：

Show Left DevTools

即打开左侧网页的的开发者工具

void
MainWindow::onBtnShowDevToolsClicked()
{if (m_pLeftCefViewWidget) {m_pLeftCefViewWidget->showDevTools();}
}

在这里插入图片描述

Reload Right QCefView

右侧网页重新加载url，这里设置的是加载Google（国内打不开）

void
MainWindow::onBtnReloadRightViewClicked()
{if (m_pRightCefViewWidget) {m_pRightCefViewWidget->navigateToUrl("https://www.google.com");}
}

Recreate Right QCefView

即重新加载右侧网页

void
MainWindow::onBtnRecreateRightViewClicked()
{createRightCefView();
}

ChangeColor

生成随机颜色改变左侧网页的颜色，这里是通知网页端进行更改的

void
MainWindow::onBtnChangeColorClicked()
{if (m_pLeftCefViewWidget) {// create a random colorQColor color(QRandomGenerator::global()->generate());// create the cef event and set the argumentsQCefEvent event("colorChange");event.arguments().append(QVariant::fromValue(color.name(QColor::HexArgb)));// broadcast the event to all frames in all browsers created by this QCefView widgetm_pLeftCefViewWidget->broadcastEvent(event);}
}

// index.in.html  
function onLoad() {if (typeof CallBridge == "undefined") {alert("Not in CefView context");return;}CallBridge.addEventListener("colorChange", function (color) {document.getElementById("main").style.backgroundColor = color;});}

在这里插入图片描述

SetFocus

设置左侧的焦点，可参考QWidget的setFocus()

CallJsCode

为执行JavaScript代码，这里是弹出一个alert的对话框。

void
MainWindow::onBtnCallJSCodeClicked()
{QString context = "helloQCefView";QString code = "alert('hello QCefView'); return {k1: 'str', k2: true, k3: 100};";m_pLeftCefViewWidget->executeJavascriptWithResult(QCefView::MainFrameID, code, "", context);
}

在这里插入图片描述

NewBrowser

则是新建一个窗口

在这里插入图片描述

左侧网页

左侧网页为本地网页index.in.html，有很多元素用来演示C++与JavaScript的交互，popup窗口、iframe等。

Web Area

演示可以通过网页实现窗口的拖拽移动，按住鼠标左键移动窗口。

在这里插入图片描述

Test Case for InvokeMethod

Invoke Method是Javascript通知C++端的演示，弹出的对话框就是由QMessageBox弹出的

  function onInvokeMethodClicked(name, ...arg) {CallBridge.invokeMethod(name, ...arg);}function testInvokeMethod() {let d = {d1: true,d2: 5678,d3: "test object",d4: [1, "2", false],d5: {d1: true,d2: 5678,d3: "nested object",d4: [1, "2", true],},};onInvokeMethodClicked("TestMethod", 1, false, "arg3", d);}

void
MainWindow::onInvokeMethod(int browserId, int64_t frameId, const QString& method, const QVariantList& arguments)
{// extract the arguments and dispatch the invocation to corresponding handlerif (0 == method.compare("TestMethod")) {QString title("QCef InvokeMethod Notify");QString text = QString("================== Current Thread: QT_UI ==================\r\n""Frame: %1\r\n""Method: %2\r\n""Arguments:\r\n").arg(frameId).arg(method);for (int i = 0; i < arguments.size(); i++) {auto jv = QJsonValue::fromVariant(arguments[i]);// clang-format offtext.append(QString("%1 Type:%2, Value:%3\r\n").arg(i).arg(arguments[i].typeName()).arg(arguments[i].toString()));// clang-format on}auto jsonValue = QJsonDocument::fromVariant(arguments);auto jsonString = QString(jsonValue.toJson());text.append(QString("\r\nArguments List in JSON format:\r\n%1").arg(jsonString));QMessageBox::information(this->window(), title, text);} else {}
}

在这里插入图片描述

Test Case for QCefQuery

演示将输入框里的内容发送给C++端

  function onCallBridgeQueryClicked() {var query = {request: document.getElementById("message").value,onSuccess: function (response) {alert(response);},onFailure: function (error_code, error_message) {alert(error_message);},};window.CefViewQuery(query);}

void
MainWindow::onQCefQueryRequest(int browserId, int64_t frameId, const QCefQuery& query)
{QString title("QCef Query Request");QString text = QString("Current Thread: QT_UI\r\n""Query: %1").arg(query.request());QMessageBox::information(this->window(), title, text);QString response = query.request().toUpper();query.setResponseResult(true, response);m_pLeftCefViewWidget->responseQCefQuery(query);
}

在这里插入图片描述

Test Case for Popup Browser

演示弹出两种popup窗口方式

<a href="#" target="_blank">Popup Browser By HTML</a>
<br />
<a href="#" onClick="window.open('#','QCefView Popup','width=800, height=600'); return false;">Popup Browser By Script</a>

An iframe with default borders

演示的是本地网页加载一个iframe页面，其余功能一致

右侧网页

右侧网页则是加载的在线网页

总结

至此，对于QCefView的编译及demo的功能讲解就结束了。由此可见QCefView的强大，与Web页面的交互能力，可以使得开发能更加的简便，也能使UI按照前端的逻辑设计成为可能。

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

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

相关文章

深入了解 Linux 中的 AWK 命令：文本处理的瑞士军刀

深入了解 Linux 中的 AWK 命令：文本处理的瑞士军刀

简介 在Linux和Unix操作系统中&#xff0c;文本处理是一个常见的任务。AWK命令是一个强大的文本处理工具&#xff0c;专门进行文本截取和分析&#xff0c;它允许你在文本文件中查找、过滤、处理和格式化数据。本文将深入介绍Linux中的AWK命令&#xff0c;让你了解其基本用法和…
阅读更多...
uboot启动流程-涉及lowlevel_init汇编函数

uboot启动流程-涉及lowlevel_init汇编函数

一. uboot启动流程涉及函数 之前文章简单分析了 uboot启动流程的开始&#xff0c;从链接脚本文件 u-boot.lds 中&#xff0c;我们已经知道了入口点是 arch/arm/lib/vectors.S 文件中的 _start函数。 _start函数&#xff1a;调用了 reset 函数&#xff0c;reset 函数内部&…
阅读更多...
Armv8/Armv9 Cache知识大纲分享--思维导图

Armv8/Armv9 Cache知识大纲分享--思维导图

关键词&#xff1a;cache学习、mmu学习、cache资料、mmu资料、arm资料、armv8资料、armv9资料、 trustzone视频、tee视频、ATF视频、secureboot视频、安全启动视频、selinux视频&#xff0c;cache视频、mmu视频&#xff0c;armv8视频、armv9视频、FF-A视频、密码学视频、RME/CC…
阅读更多...
ssm+vue的图书馆书库管理系统（有报告）。Javaee项目，ssm vue前后端分离项目。

ssm+vue的图书馆书库管理系统（有报告）。Javaee项目，ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的图书馆书库管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构…
阅读更多...
Cesium实现动态旋转四棱锥（2023.9.11）

Cesium实现动态旋转四棱锥（2023.9.11）

Cesium实现动态悬浮旋转四棱锥效果 2023.9.11 1、引言2、两种实现思路介绍2.1 思路一&#xff1a;添加已有的四棱锥&#xff08;金字塔&#xff09;模型实现&#xff08;简单但受限&#xff09;2.2 思路二&#xff1a;自定义四棱锥几何模型实现&#xff08;复杂且灵活&#xff…
阅读更多...
Leetcode 69.x的平方根

Leetcode 69.x的平方根

给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 注意&#xff1a;不允许使用任何内置指数函数和算符&#xff0c;例如 pow(x, 0.5) 或者 x ** 0.5 。 示例 1&#xff1…
阅读更多...
深度学习 二：COVID 19 Cases Prediction (Regression)

深度学习 二：COVID 19 Cases Prediction (Regression)

Deep Learning 1. 回归算法思路2. 代码2.1 基础操作2.2 定义相关函数2.3.1 定义图像绘制函数2.3.2 数据集加载及预处理2.3.3 构造数据加载器2.3.4 构建前馈神经网络&#xff08;Feedforward Neural Network&#xff09;模型2.3.5 神经网络的训练过程2.3.6 模型评估2.3.7 模型测…
阅读更多...
ECharts多个数据视图进行自适应大小的解决方案

ECharts多个数据视图进行自适应大小的解决方案

项目场景&#xff1a; 在制作数据视图时经常会遇到多个数据视图的情况&#xff0c;在多个数据视图的情况下做自适应是比较麻烦的&#xff0c;这里就详细的分析一下该如何去制作&#xff0c;分享一下我的解决办法及思路。 定义 DOM 容器 这里需要注意一个地方&#xff0c;在定…
阅读更多...
mac openssl 版本到底怎么回事 已解决

mac openssl 版本到底怎么回事 已解决

在mac 安装node多版本的时候&#xff0c;有可能把原有的 openssl1.1 版本 直接要再一次升级了&#xff0c;无奈的 php环境 编译器是 openssl 1.1 还是 3.0 &#xff0c;今天来个底朝天的找问题。 brew search openssl 有安装 三个版本。 但是错误提示 是第二个版本。 brew …
阅读更多...
B058-SpringBoot

B058-SpringBoot

目录 springboot概念与作用入门案例springboot运行方式热部署配置文件Profile多环境支持整合测试-springboot-testSpringboot-web1.返回json数据2.返回页面&#xff08;模板技术&#xff09;thymeleaf1.导入thymeleaf依赖2.模板文件3.controller4.启动类 SSM整合1.导包2.项目目…
阅读更多...
【动态规划】动态规划经典例题 力扣牛客

【动态规划】动态规划经典例题 力扣牛客

文章目录 跳台阶 BM63 简单跳台阶扩展 JZ71 简单打家结舍 LC198 中等打家劫舍2 LC213中等最长连续递增序列 LC674 简单乘积最大子数组LC152 中等最长递增子序列LC300 中等最长重复子数组LC718最长公共子串NC BM66最长公共子序列LC1143 中等完全平方数LC279零钱兑换 LC322 中等单…
阅读更多...
QT的ui设计中改变样式表的用法

QT的ui设计中改变样式表的用法

在QT的ui设计中，我们右键会弹出一个改变样式表的选项，很多人不知道这个是干什么的。 首先我们来看下具体的界面 首先我们说一下这个功能具体是干嘛的， 我们在设置很多控件在界面上之后，常常都是使用系统默认的样式，但是当有些时候为了美化界面我们需要对一些控件进行美化…
阅读更多...
【数据结构】链表与LinkedList

【数据结构】链表与LinkedList

作者主页&#xff1a;paper jie 的博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JAVA数据结构》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精…
阅读更多...
小程序编译器性能优化之路

小程序编译器性能优化之路

作者 | 马可 导读 小程序编译器是百度开发者工具中的编译构建模块&#xff0c;用来将小程序代码转换成运行时代码。旧版编译器由于业务发展&#xff0c;存在编译慢、内存占用高的问题&#xff0c;我们对编译器做了一次大规模的重构&#xff0c;采用自研架构&#xff0c;做了多线…
阅读更多...
链表经典面试题(一)

链表经典面试题(一)

面试题 1.反转链表的题目2.反转链表的图文分析3.反转链表的代码实现 1.反转链表的题目 2.反转链表的图文分析 我们在实现反转链表的时候,是将后面的元素变前面&#xff0c;前面的元素变后面&#xff0c;那么我们是否可以理解为&#xff0c;用头插法的思想来完成反转链表呢&…
阅读更多...
Cannot download sources：IDEA源码无法下载

Cannot download sources：IDEA源码无法下载

问题 Swagger的相关包&#xff0c;无法看到注释&#xff1b; 在class文件的页面&#xff0c;点击下载源码&#xff0c;源码下载不了&#xff0c;IDEA报下面的错误。 报错 Cannot download sources Sources not found for: io.swagger.core.v3:swagger-annotations:2.2.9 解决…
阅读更多...
读者写者问题—内含408真题

读者写者问题—内含408真题

读者写者问题—含408 一、问题描述 一个数据问价或记录可以被多个进程共享&#xff0c;我们把只读该文件的进程称为“读者进程”&#xff0c;其他进程为“写者进程”。允许多个进程同时读一个共享对象&#xff0c;但不允许一个写者进程和其他写者进程或读者进程同时访问共享对…
阅读更多...
点亮一个LED+LED闪烁+LED流水灯——“51单片机”

点亮一个LED+LED闪烁+LED流水灯——“51单片机”

各位CSDN的uu们好呀&#xff0c;这是小雅兰的最新专栏噢&#xff0c;最近小雅兰学习了51单片机的知识&#xff0c;所以就想迫不及待地分享出来呢&#xff01;&#xff01;&#xff01;下面&#xff0c;让我们进入51单片机的世界吧&#xff01;&#xff01;&#xff01; 点亮一个…
阅读更多...
Linux基础命令汇总

Linux基础命令汇总

用户管理 su 切换用户&#xff1a;su 用户名 logname 显示当前用户的登录用户名&#xff1a;logname useradd 创建用户&#xff1a;useradd 用户名创建用户时指定用户的主组&#xff1a;useradd -g 组名 用户名 usermod 添加附属组&#xff1a;usermod -G 组…
阅读更多...
2023年8月嵌入式项目开发专题总汇

2023年8月嵌入式项目开发专题总汇

一、前言 本文介绍基于嵌入式系统和C语言开发的系列项目。这些项目涵盖了多个领域&#xff0c;从自动化控制到游戏开发&#xff0c;从计算机网络到物联网应用。通过这些项目的开发过程&#xff0c;将深入探讨各种技术和解决方案&#xff0c;并分享相关经验和知识。 在本文中&…
阅读更多...
最新文章

Copyright @ 2022~2023