QT+HTML+JS

写在前面

第一次写博客,目的就是记录一些自己在工程中遇到到一些小问题,同时分享出来,加深自己记忆的同时,也希望可以帮助到遇到相同问题的人。
本文参考了:
Qt嵌入浏览器——QWebChannel实现与页面的通信
QT+HTML+JS混合编程(QT5.9+QWebEngineView +QWebchannel)

主要实现两个大功能:
1、QT+QWebEngineView 嵌入浏览器;
2、QT+QWebchannel 实现与JS的相互通信。

Qt嵌入浏览器

(1)、工程.pro文件添加
QT += webenginewidgets
(2)、实例化QWebEngineView,使用load(QString url)方法加载网页;
eg:

#include <QWebEngineView>
	QWebEngineView *m_WebEngineView;
	m_WebEngineView = new QWebEngineView();
	m_WebEngineView->load("https://www.baidu.com/");	//加载百度页面
	m_WebEngineView->reload();							//重新加载当前页面

示意图:
在这里插入图片描述

Qt与JS的相互通信

(1)、创建QWebChannel对象;

QWebChannel *webChannel = new QWebChannel(this);

(2)、向QWebChannel对象注册Qt对象,使用registerObject(const QString &id, QObject *object)方法,参数一:注册所需的ID号或者名字,用于JS获取QT的对象时所用的索引名;参数二,QT对象

webChannel->registerObject("bridge",m_JsContext);

(3)、将设置好的QWebChannel对象设置为当前页面的通道。

m_WebEng
### 回答1: Qt和CEF可以实现混合开发,即将两种技术和优点结合起来,开发出高效、高可靠性的应用程序。下面我们来看一个Qt CEF混合开发应用实例。 以开发一个简单的浏览器为例,首先使用QtQtWebEngine模块创建浏览器框架,然后使用CEF库来加载HTML页面。具体步骤如下: 1.创建Qt浏览器框架:使用QtWebEngine模块创建一个基本的浏览器窗口,该窗口可以包含地址栏、前进/后退、刷新等基本浏览器功能。 2.集成CEF:将CEF库与Qt框架集成。CEF库是一个基于Chromium开发的框架,可以用于加载HTML、JavaScript、CSS等Web技术。CEF库提供了强大的JavaScript和UI交互能力,可以通过CEF实现更多更复杂的功能。 3.在Qt中使用CEF:通过Qt的QWindow类和CEF的CefWindowHandle类实现QWindow和CEF窗口之间的交互。可以使用Qt的信号/槽机制来处理CEF窗口的事件。 4.加载HTML页面:通过CEF加载HTML页面,通过Qt的WebView控件在浏览器框架中显示页面内容。 通过以上步骤,我们可以创建一个基于Qt和CEF混合开发的浏览器应用程序。这种混合开发方式可以充分利用Qt和CEF提供的各自的优势,开发出高效、高可靠性的应用程序。同时也可以在UI和交互方面更加灵活地实现各种功能。 ### 回答2: Qt和CEF(Chromium Embedded Framework)混合开发应用可以使你开发跨平台的、具有Web前端组件的应用,为用户提供更好的用户体验和更丰富的交互特性,下面是一个实例。 我们可以使用Qt作为应用程序框架,同时使用CEF作为嵌入的Web浏览器来呈现Web内容。这个应用程序使用了Qt的GUI组件、CEF的Web组件和C++的普通类和函数来实现。 具体实现过程如下: 1. 下载和安装CEF。CEF是一个本地Web浏览器框架,支持Windows、macOS和Linux系统。它允许你使用Chromium浏览器内核来呈现Web内容。CEF提供了一系列的API和工具来支持应用与Web内容直接的交互。 2. 使用Qt Creator创建一个新的Qt Widgets应用程序。在项目设置中配置如下: a. 加入CEF运行时库文件和头文件。 b. 对于Windows平台,在项目属性中配置Qt和CEF的链接库。 c. 添加一个Qt Form作为主界面。 3. 在Qt代码中使用CEF组件,在主界面中添加一个QVBoxLayout。将CEF Widget直接放在这个Layout中,从而实现与其他Qt Widgets的混合。 4. 在C++代码中创建一个CEF浏览器对象。这个对象负责加载和解析Web页面,和处理浏览器事件。在开始时CEF浏览器会调用on_loading_state_change()回调函数,它表示CEF正在加载Web页面。 5. 当CEF浏览器加载Web页面时,处理web页面中的事件,例如提交表单、点击按钮等。CEF JavaScript Binding桥接机制可以让你在C++代码中注册JavaScript回调,让Web侧能够调用本地功能。CEF也允许你从Web页面中注入JavaScript脚本,以实现与本地代码的通信。 总结:使用Qt和CEF混合开发应用,可以开发出具有极佳用户体验的跨平台应用程序,一方面,可以充分利用CEF提供的强大的Web交互能力,另一方面,可以使用Qt的GUI组件来构建应用程序框架,并使其与Web组件混合。对于开发者而言,这意味着更轻松的应用程序开发和更高效的应用程序交互方式。 ### 回答3: qt和cef的混合开发应用是通过将QT的界面与CEF的web浏览器引擎相结合,实现了一种可支持Web技术的应用程序的开发方式。 比如在一个桌面应用程序中,用户可以在QT界面中使用CEF作为内置浏览器来浏览Web页面或连接Web服务。 一种实例是使用QT中的QWebEngineView来加载CEF中的Web页面,可以通过QWebChannel来实现QT和CEF两者之间的通信,例如把QT中的JavaScript对象传递到CEF中,或者把CEF中的事件传递到QT中进行处理。这样可以实现在QT应用程序中嵌入Web浏览器,同时利用QT的强大框架和CEF的强大Web渲染技术为应用程序添加更多的功能。 另外,QT中还提供了QtWebEngineWidgets来支持类似于CEF的Web浏览器功能,同时可以与QT的界面框架无缝整合,用于创建具有丰富Web功能的桌面应用程序。 总之,QT和CEF的混合开发应用可以扩展应用程序的Web功能,从而提供更加丰富、更加强大的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值