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.hqwc.cn/news/124634.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【深蓝学院】手写VIO第4章--基于滑动窗口算法的 VIO 系统：可观性和 一致性--作业

【深蓝学院】手写VIO第4章--基于滑动窗口算法的 VIO 系统：可观性和 一致性--作业

0. 内容 T1. 参考SLAM14讲P247直接可写&#xff0c;注意 ξ 1 , ξ 2 \xi_1,\xi_2 ξ1​,ξ2​之间有约束&#xff08;关系&#xff09;。 套用舒尔补公式&#xff1a; marg掉 ξ 1 \xi_1 ξ1​之后&#xff0c;信息被传递到 L 1 和 L 2 L_1和L_2 L1​和L2​之间了。 T2. …
阅读更多...
Sentinel学习（1）——CAP理论，微服务中的雪崩问题，和Hystix的解决方案 Sentinel的相关概念 + 下载运行

Sentinel学习（1）——CAP理论，微服务中的雪崩问题，和Hystix的解决方案 Sentinel的相关概念 + 下载运行

前言 Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;主要以流量为切入点&#xff0c;从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性。 本篇博客介绍CAP理论&#xff0c;微…
阅读更多...
动态规划-状态机（188. 买卖股票的最佳时机 IV）

动态规划-状态机（188. 买卖股票的最佳时机 IV）

状态分类&#xff1a; f[i,j,0]考虑前i只股票&#xff0c;进行了j笔交易&#xff0c;目前未持有股票 所能获得最大利润 f[i,j,1]考虑前i只股票&#xff0c;进行了j笔交易&#xff0c;目前持有股票 所能获得最大利润 状态转移&#xff1a; f[i][j][0] Math.max(f[i-1][j][0],f[…
阅读更多...
51单片机可调幅度频率波形信号发生器( proteus仿真+程序+原理图+报告+讲解视频）

51单片机可调幅度频率波形信号发生器( proteus仿真+程序+原理图+报告+讲解视频）

51单片机可调幅度频率信号发生器( proteus仿真程序原理图报告讲解视频&#xff09; 讲解视频1.主要功能&#xff1a;2.仿真3. 程序代码4. 原理图4. 设计报告5. 设计资料内容清单&&下载链接***[资料下载链接](https://docs.qq.com/doc/DS1daV1BKRXZMeE9u)*** 51单片机可…
阅读更多...
ARM day2

ARM day2

1-100的和 代码&#xff1a; .text .globl _start _start:mov r0,#0mov r1,#1 loop:cmp r1,#100bhi stopaddls r0,r1,r0add r1,r1,#1b loop stop:b stop .end结果&#xff1a; 思维导图&#xff1a;
阅读更多...
C/C++字符函数和字符串函数详解————内存函数详解与模拟

C/C++字符函数和字符串函数详解————内存函数详解与模拟

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂。 目录 1.前言 2 .memcpy函数 3.memmove函…
阅读更多...
Tomcat 与 JDK 对应版本关系

Tomcat 与 JDK 对应版本关系

对应关系 Tomcat版本 jdk版本11.0.x JDK 21及以后10.1.x JDK11及以后10.0.xJDK1.8及以后9.0.x JDK1.8及以后8.5.xJDK1.7及以后8.0.x JDK1.7及以后 查看对应关系方法&#xff1a; 登陆Tomcat官网&#xff1a;Apache Tomcat - Welcome! 结果&#xff1a;
阅读更多...
【网络原理】初始网络，了解概念

【网络原理】初始网络，了解概念

文章目录 1. 网络通信1.1 局域网LAN1.2 广域网WAN 2. 基础概念2.1 IP2.2 端口号 3. 认识协议4. 五元组5. 协议分层5.1 分层的作用5.2 OSI七层模型5.3 TCP/IP五层&#xff08;四层&#xff09;模型 6. 封装和分用 1. 网络通信 计算机与计算机之间是互相独立&#xff0c;是独立模…
阅读更多...
我的第一个react.js 的router工程

我的第一个react.js 的router工程

react.js 开发的时候&#xff0c;都是针对一个页面的&#xff0c;多个页面就要用Router了&#xff0c;本文介绍我在vscode 下的第一个router 工程。 我在学习react.js 前端开发&#xff0c;学到router 路由的时候有点犯难了。经过1-2天的努力&#xff0c;终于完成了第一个工程…
阅读更多...
openGauss学习笔记-89 openGauss 数据库管理-内存优化表MOT管理-内存表特性-使用MOT-MOT使用查询原生编译

openGauss学习笔记-89 openGauss 数据库管理-内存优化表MOT管理-内存表特性-使用MOT-MOT使用查询原生编译

文章目录 openGauss学习笔记-89 openGauss 数据库管理-内存优化表MOT管理-内存表特性-使用MOT-MOT使用查询原生编译89.1 查询编译&#xff1a;PREPARE语句89.2 运行命令89.3 轻量执行支持的查询89.4 轻量执行不支持的查询89.5 JIT存储过程89.6 MOT JIT诊断89.6.1 mot_jit_detai…
阅读更多...
git使用，一点点

git使用，一点点

查看自己有没有安装git git --version 如果没有安装请执行sudo yum install -y git来安装 git 指令 git log 查看日志 git pull 同步远端和本地仓库 这就是冲突的报错&#xff1a; 所以这个时候你要同步一下git pull
阅读更多...
机器学习7：逻辑回归

机器学习7：逻辑回归

一、说明 逻辑回归模型是处理分类问题的最常见机器学习模型之一。二项式逻辑回归只是逻辑回归模型的一种类型。它指的是两个变量的分类&#xff0c;其中概率用于确定二元结果&#xff0c;因此“二项式”中的“bi”。结果为真或假 — 0 或 1。 二项式逻辑回归的一个例子是预测人…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023