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.mzph.cn/news/93108.shtml

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

相关文章

IDEA的使用

IDEA的使用

文章目录 1.IDEA配置1.1 idea界面说明1.2 git1.3 JDK1.4 maven1.5 Tomcat1.6 idea设置编码格式1.7 vscodenodejs1.8 windows下安装redis 2. IDEA问题2.1 setAttribute方法爆红2.2 idea cannot download sources解决办法2.3 springboot项目跑起来不停run 3. vscode3.1 vscode显示…
阅读更多...
c++三大概念要分清--重载，隐藏（重定义），覆盖（重写）

c++三大概念要分清--重载，隐藏（重定义），覆盖（重写）

目 录 一、重载 **&#xff08;1&#xff09;概念&#xff1a;**在同一个作用域内&#xff1b;函数名相同&#xff0c;参数列表不同&#xff08;参数个数不同&#xff0c;或者参数类型不同&#xff0c;或者参数个数和参数类型都不同&#xff09;&#xff0c;返回值类型可相同也…
阅读更多...
uniapp项目实践总结(二十五)苹果 ios 平台 APP 打包教程

uniapp项目实践总结(二十五)苹果 ios 平台 APP 打包教程

导语：当你的应用程序开发完成后，在上架 ios 应用商店之前，需要进行打包操作，下面就简单介绍一下打包方法。 目录 准备工作注册账号生成证书打包配置准备工作 在打包之前，请保证你的 uniapp 应用程序编译到 ios 模拟器或者是真机调试基座环境下是可以正常运行的，苹果打包…
阅读更多...
input输入表头保存excel文件

input输入表头保存excel文件

input输入表头 input输入表头 &#xff08;input内除了/&#xff0c;空格 回车 标点符号等 全部作为单元格分隔符&#xff09;保存/storage/emulated/0/代码文件/ 没有就创建文件名命名方法&#xff1a;编号. 库 时间戳嗨&#xff01;听说你有个需求&#xff0c;想根据用户输入…
阅读更多...
CSS基础语法第二天

CSS基础语法第二天

目录 一、复合选择器 1.1 后代选择器 1.2 子代选择器 1.3 并集选择器 1.4 交集选择器 1.4.1超链接伪类 二、CSS特性 2.1 继承性 2.2 层叠性 2.3 优先级 基础选择器 复合选择器-叠加 三、Emmet 写法 3.1HTML标签 3.2CSS 四、背景属性 4.1 背景图 4.2 平铺方式 …
阅读更多...
使用sqlmap的 ua注入

使用sqlmap的 ua注入

文章目录 1.使用sqlmap自带UA头的检测2.使用sqlmap随机提供的UA头3.使用自己写的UA头4.调整level检测 测试环境&#xff1a;bWAPP SQL Injection - Stored (User-Agent) 1.使用sqlmap自带UA头的检测 python sqlmap.py -u http://127.0.0.1:9004/sqli_17.php --cookie“BEEFHOO…
阅读更多...
01-Zookeeper特性与节点数据类型详解

01-Zookeeper特性与节点数据类型详解

上一篇&#xff1a; 在了解Zookeeper之前&#xff0c;需要对分布式相关知识有一定了解&#xff0c;什么是分布式系统呢&#xff1f;通常情况下&#xff0c;单个物理节点很容易达到性能&#xff0c;计算或者容量的瓶颈&#xff0c;所以这个时候就需要多个物理节点来共同完成某项…
阅读更多...
C++ 重载运算符和重载函数

C++ 重载运算符和重载函数

C 允许在同一作用域中的某个函数和运算符指定多个定义&#xff0c;分别称为函数重载和运算符重载。 重载声明是指一个与之前已经在该作用域内声明过的函数或方法具有相同名称的声明&#xff0c;但是它们的参数列表和定义&#xff08;实现&#xff09;不相同。 当您调用一个重…
阅读更多...
【论文极速读】Prompt Tuning——一种高效的LLM模型下游任务适配方式

【论文极速读】Prompt Tuning——一种高效的LLM模型下游任务适配方式

【论文极速读】Prompt Tuning——一种高效的LLM模型下游任务适配方式 FesianXu 20230928 at Baidu Search Team 前言 Prompt Tuning是一种PEFT方法&#xff08;Parameter-Efficient FineTune&#xff09;&#xff0c;旨在以高效的方式对LLM模型进行下游任务适配&#xff0c;本…
阅读更多...
基于大语言模型扬长避短架构服务

基于大语言模型扬长避短架构服务

秘诀&#xff1a; 扬泛化之长&#xff0c; 避时延之短
阅读更多...
CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果

CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果

上一篇&#xff0c;我们介绍了动画编辑器相关功能面板说明&#xff0c;感兴趣的朋友可以前往阅读&#xff1a; CocosCreator3.8研究笔记&#xff08;二十三&#xff09;CocosCreator 动画系统-动画编辑器相关功能面板说明。 熟悉了动画编辑器的基础操作&#xff0c;那么再使用动…
阅读更多...
基于Javaweb的护肤品推荐系统 /基于ssm的护肤品销售系统

基于Javaweb的护肤品推荐系统 /基于ssm的护肤品销售系统

摘 要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时代&a…
阅读更多...
八大排序（三）堆排序，计数排序，归并排序

八大排序（三）堆排序，计数排序，归并排序

一、堆排序 什么是堆排序&#xff1a;堆排序&#xff08;Heap Sort&#xff09;就是对直接选择排序的一种改进。此话怎讲呢&#xff1f;直接选择排序在待排序的n个数中进行n-1次比较选出最大或者最小的&#xff0c;但是在选出最大或者最小的数后&#xff0c;并没有对原来的序列…
阅读更多...
毕业设计选题uniapp+springboot新闻资讯小程序源码 开题 lw 调试

毕业设计选题uniapp+springboot新闻资讯小程序源码 开题 lw 调试

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人七年开发经验&#xff0c;擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等&#xff0c;大家有这一块的问题可以一起交流&#xff01; &#x1f495;&…
阅读更多...
基于 QT 实现一个 Ikun 专属桌面宠物

基于 QT 实现一个 Ikun 专属桌面宠物

Step0、实现思路 想到的思路有两种&#xff1a; 1、使用 QT 的状态机模式&#xff0c;参考官网文档&#xff0c;这个模式的解耦最佳 2、使用原生 Wigets&#xff0c;将窗口设置为透明无框&#xff0c;循环播放桌面宠物的状态 本文采用第二种思路&#xff0c;实现一个极简版…
阅读更多...
低功耗引擎Cliptrix为什么可以成为IOT的高效能工具

低功耗引擎Cliptrix为什么可以成为IOT的高效能工具

在万物互联的时代&#xff0c;现代人已普遍接受电视、音箱等电器设备具备智能化能力&#xff0c;也是在这个趋势下&#xff0c;我们身边越来越多的iOT设备联网和交互成为刚需。 但iot设备也面临到一些非常显著的痛点&#xff0c;例如iot设备的内存、处理器等核心元件无法与手机…
阅读更多...
[Java·算法·困难]LeetCode124.二叉树中的最大路径和

[Java·算法·困难]LeetCode124.二叉树中的最大路径和

每天一题&#xff0c;防止痴呆 题目示例分析思路1题解1 &#x1f449;️ 力扣原文 题目 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点&#xff0c;且不一定经…
阅读更多...
对pyside6中的textedit进行自定义，实现按回车可以触发事件。

对pyside6中的textedit进行自定义，实现按回车可以触发事件。

以下方法不算最优解。因为这个ui文件很容易重新编译&#xff0c;使写在ui.py里面的代码被删掉。 所以更好的方法应该是在主代码当中单独定义控件。并且使用布局添加控件到界面中。 以下内容纯为旧版实现&#xff0c;仅供参考&#xff1a; 我的实现方法是&#xff0c;先用qt de…
阅读更多...
拒绝水文！八大排序（三）【适合初学者】快速排序

拒绝水文！八大排序（三）【适合初学者】快速排序

文章目录 快速排序递归实现霍尔法优化 挖坑法前后指针法 快速排序非递归 大家好&#xff0c;我是纪宁&#xff0c;这篇文章将向大家介绍非常有名气的一款排序&#xff1a;快速排序 回忆到我们刚开始学习C语言的时候。经常会使用到一个库函数&#xff1a; qsort函数 &#xff0…
阅读更多...
【JavaEE】JavaScript

【JavaEE】JavaScript

JavaScript 文章目录 JavaScript组成书写方式行内式内嵌式外部式&#xff08;推荐写法&#xff09; 输入输出变量创建动态类型基本数据类型数字类型特殊数字值 String转义字符求长度字符串拼接布尔类型undefined未定义数据类型null 运算符条件语句if语句三元表达式switch 循环语…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023