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.rhkb.cn/news/145681.html

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

相关文章

NLP 项目：维基百科文章爬虫和分类 - 语料库阅读器

NLP 项目：维基百科文章爬虫和分类 - 语料库阅读器

塞巴斯蒂安 一、说明 自然语言处理是机器学习和人工智能的一个迷人领域。这篇博客文章启动了一个具体的 NLP 项目&#xff0c;涉及使用维基百科文章进行聚类、分类和知识提取。灵感和一般方法源自《Applied Text Analysis with Python》一书。 在接下来的文章中&#xff0c;我将…
阅读更多...
Android 编译插桩操纵字节码

Android 编译插桩操纵字节码

本文讲解如何编译插桩操纵字节码。 就使用 ASM 来实现简单的编译插桩效果&#xff0c;通过插桩实现在每一个 Activity 打开时输出相应的 log 日志。实现思路 过程主要包含两步&#xff1a; 1、遍历项目中所有的 .class 文件​ 如何找到项目中编译生成的所有 .class 文件&#…
阅读更多...
初识多线程

初识多线程

一、多任务 现实中太多这样同时做多件事的例子了&#xff0c;例如一边吃饭一遍刷视频&#xff0c;看起来是多个任务都在做&#xff0c;其实本质上我们的大脑在同一时间依旧只做了一件事情。 二、普通方法调用和多线程 普通方法调用只有主线程一条执行路径 多线程多条执行路径…
阅读更多...
xPortPendSVHandler任务切换流程

xPortPendSVHandler任务切换流程

__asm void xPortPendSVHandler( void ) { extern uxCriticalNesting; extern pxCurrentTCB; extern vTaskSwitchContext; PRESERVE8 mrs r0, psp isb//指令同步命令&#xff0c; ldr r3, pxCurrentTCB /* Get the location of the current TCB. */ ldr r2, [r3]//r2保存…
阅读更多...
【面试经典150 | 矩阵】螺旋矩阵

【面试经典150 | 矩阵】螺旋矩阵

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;模拟方法二&#xff1a;按层模拟 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于…
阅读更多...
flink选择slot

flink选择slot

flink选择slot 在这个类里修改 package org.apache.flink.runtime.resourcemanager.slotmanager.SlotManagerImpl; findMatchingSlot(resourceProfile)&#xff1a;找到满足要求的slot&#xff08;负责从哪个taskmanager中获取slot&#xff09;对应上图第8&#xff0c;9&…
阅读更多...
[vue-admin-template实战笔记]

[vue-admin-template实战笔记]

1.克隆项目 git clone gitgitee.com:panjiachen/vue-admin-template.git 2.安装依赖 npm install 3.运行项目就会自动打开网页&#xff0c;并且热部署插件 npm run dev 4.查看代码 //将vue-admin-template拖入到idea中即可查看代码 1)并且发现&#xff0c;常用的东西已经集…
阅读更多...
从零手搓一个【消息队列】创建核心类, 数据库设计与实现

从零手搓一个【消息队列】创建核心类, 数据库设计与实现

文章目录 一、创建核心类1, 交换机2, 交换机类型3, 队列4, 绑定5, 交换机转发 & 绑定规则6, 消息7, 消息属性 二、数据库设计1, 使用 SQLite2, 使用 MyBatis2.1, 创建 Interface2.2, 创建 xml 文件 三、硬盘管理 -- 数据库1, 创建 DataBaseManager 类2, init() 初始化数据库…
阅读更多...
什么是AI客流量算法？如何应用在实际场景中？

什么是AI客流量算法？如何应用在实际场景中？

客流量分析算法简而言之就是一种利用数据分析和机器学习技术进行人流量统计、预测和分析的算法。它能够根据不同的数据来源&#xff0c;如摄像头、传感器等&#xff0c;对特定区域内的客流量进行实时监测和分析&#xff0c;并通过对历史数据的综合分析&#xff0c;提供客流趋势…
阅读更多...
ARM-day2

ARM-day2

1、1到100累加 .text .global _start_start:MOV r0, #1ADD r1,r0, #1fun:ADD r0,r0,r1ADD r1,r1, #1cmp r1, #0x65moveq PC,LRbl funstop:b stop.end2、思维导图
阅读更多...
Java基础---第十篇

Java基础---第十篇

系列文章目录 文章目录 系列文章目录一、说说Java 中 IO 流二、 Java IO与 NIO的区别（补充）三、java反射的作用于原理一、说说Java 中 IO 流 Java 中 IO 流分为几种? 按照流的流向分，可以分为输入流和输出流； 按照操作单元划分，可以划分为字节流和字符流； 按照流的角色…
阅读更多...
java导出word(含图片、表格)

java导出word(含图片、表格)

1.pom 引入 <!--word报告生成依赖--><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.2</version></dependency><dependency><groupId>org.apache.poi</groupI…
阅读更多...
【单片机】12-串口通信和RS485

【单片机】12-串口通信和RS485

1.通信有关的常见概念 区分&#xff1a;串口&#xff0c;COM口&#xff0c;UART&#xff0c;USART_usart和串口区别-CSDN博客 串口、COM口、UART口, TTL、RS-232、RS-485区别详解-CSDN博客 1.什么是通信 &#xff08;1&#xff09;人和人之间的通信&#xff1a;说话&#xff…
阅读更多...
腾讯云 Cloud Studio 实战训练营结营活动获奖公示

腾讯云 Cloud Studio 实战训练营结营活动获奖公示

点击链接了解详情 “腾讯云 Cloud Studio 实战训练营” 是由腾讯云联合 CSDN 推出的系列开发者技术实践活动&#xff0c;通过技术分享直播、动手实验项目、优秀代码评选、有奖征文活动等&#xff0c;让广大开发者沉浸式体验腾讯云开发者工具 Cloud Studio 的同时&#xff0c;实…
阅读更多...
《数据结构、算法与应用C++语言描述》-栈的应用-开关盒布线问题

《数据结构、算法与应用C++语言描述》-栈的应用-开关盒布线问题

开关盒布线问题 问题描述 在开关盒布线问题中&#xff0c;给定一个矩形布线区域&#xff0c;其外围有若干管脚。两个管脚之间通过布设一条金属线路来连接。这条金属线路称为电线&#xff0c;它被限制在矩形区域内。两条电线交叉会发生电流短路。因此&#xff0c;电线不许交叉…
阅读更多...
Python异步框架大战：FastAPI、Sanic、Tornado VS Go 的 Gin

Python异步框架大战：FastAPI、Sanic、Tornado VS Go 的 Gin

一、前言 异步编程在构建高性能 Web 应用中起着关键作用&#xff0c;而 FastAPI、Sanic、Tornado 都声称具有卓越的性能。本文将通过性能压测对这些框架与Go的Gin框架进行全面对比&#xff0c;揭示它们之间的差异。 原文&#xff1a;Python异步框架大战&#xff1a;FastAPI、Sa…
阅读更多...
【智能家居项目】裸机版本——项目介绍 | 输入子系统(按键) | 单元测试

【智能家居项目】裸机版本——项目介绍 | 输入子系统(按键) | 单元测试

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《智能家居项目》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 目录 &#x1f3c0;项目简介&#x1f3c0;输入子系统(按键)⚽应用层⚽设备层⚽ 内核层抽象层⚽…
阅读更多...
每日一练-Q1-大数加法-20231001

每日一练-Q1-大数加法-20231001

目录 1.题目描述 2.输入描述 3.示例提示 4.问题分析 5.通过代码 1.题目描述 大数一直是一个c语言的一个难题。 现在我们需要你手动模拟出大数加法过程。 请你给出两个大整数加法结果。 2.输入描述 第一行输入整数n&#xff0c;第二行输入整数m。 (1<number<1e100)…
阅读更多...
在nodejs中如何防止ssrf攻击

在nodejs中如何防止ssrf攻击

在nodejs中如何防止ssrf攻击 什么是ssrf攻击 ssrf&#xff08;server-side request forgery&#xff09;是服务器端请求伪造&#xff0c;指攻击者能够从易受攻击的Web应用程序发送精心设计的请求的对其他网站进行攻击。(利用一个可发起网络请求的服务当作跳板来攻击其他服务)…
阅读更多...
10月1日作业

10月1日作业

汇编指令合集 用select实现服务器并发代码 #include<myhead.h> #define IP "192.168.0.106" #define PORT 8888int main(int argc, const char *argv[]) {//新建套接字文件int sfd socket(AF_INET, SOCK_STREAM, 0);if(sfd < 0){ERR_MSG("socket&quo…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023