Qt5 中 QWebEngineView 的使用,让桌面客户端和 web 端友好通信
一、本文结构
- Qt5 中 web 开发的基本配置,工程搭建。
- 加载 HTML 文件。
- Qt 界面窗口调用 HTML 中的 JavaScript 函数(Qt 调用 js)
- Qt 界面窗口获取 HTML 中 Js 函数的返回值。
- Web 端消息主动通知到 Qt 界面(js 通知 Qt)。
二、基本配置,工程搭建
(1)Qt 安装时要安装 web 开发组件,本案例采用 Qt5.9.6 vs2015 开发环境。
(2)新建 Qt Gui 工程要首先勾选以下三个组件
(3)qwebchannel.js文件,安装Qt后在安装文件夹下面可以搜索找到
(4)本案例代码文件结构
其中Ui文件的简单布局如下:
其中,左侧为 QWebEngineView 控件,右侧一个调用 js 函数的按钮,一个获取 js 返回值的按钮,另一个为操作结果显示的 label 控件。
三、加载 html 文件
找到html文件位置,QWebEngineView的load()函数可以加载html文件显示,形式如下:
m_pWebView->load(QUrl("file:///" + htmlPath));
四、Qt 调用 HTML 中的 JavaScript 函数
假设html中有js函数如下:
// 添加一个圆形覆盖物function addCircle(){var point = new BMap.Point(116.404, 39.915);var circle = new BMap.Circle(point, 6000, { strokeColor: "red", strokeWeight: 5, strokeOpacity: 0.3 }); //创建圆map.addOverlay(circle); //增加圆}
在Qt桌面端,只需要用一个字符串把 js 函数名称弄下来就行啦,然后通过执行 runJavaScript 函数就可以对 html 操作了,操作方式如下:
QString jsStr = QString("addCircle()");
m_pWebView->page()->runJavaScript(jsStr);
五、Qt 界面窗口获取 HTML 中 Js 函数的返回值
只能调它的 js 函数还不行啊,我想知道它执行完返回给我啥了,那这个时候就需要看看这个 runJavaScript 函数了:
void runJavaScript(const QString& scriptSource,
const QWebEngineCallback<const QVariant &> &resultCallback);
如上,这个调用是异步的,这个可以传个回调函数进去,执行结果可以直接在回调函数来处理。
在本 Demo 中直接用 lambda 函数处理了,如下:
QString WebTest::getJsRetString()
{QEventLoop loop;connect(this, &WebTest::signalRunJsOver, &loop, &QEventLoop::quit);QString jsStr = "getInfo();";// 调用Js的getInfo函数QString retStr{}; // 返回值// 通过loop循环等到回调上来数据再继续m_pWebView->page()->runJavaScript(jsStr, [&](const QVariant &v){retStr = v.toString();// 在头文件中定义这个函数,收到js的回调返回值后,结束loop循环emit signalRunJsOver();});loop.exec(); // 收不到回调处理结束信号,我就在这里循环等待return retStr;
}
六、Web 端消息主动通知到 Qt 界面。
以上都是 Qt 端主动操作 web 端的对象、函数等,那 web 端要发某个消息给 Qt 端,怎么处理呢?
用 QWebChannel,基本使用方式如下:
m_pWebChannel = new QWebChannel(this); // 创建对象// 注册一个qtui对象 html端通过此名称向qt端发送消息m_pWebChannel->registerObject(QString("qtui"), this);m_pWebView->page()->setWebChannel(m_pWebChannel);
基本定义完成后,我们需要定义一个槽函数,接收 web 端发的消息,定义基本格式如下:
public slots: // 一定要这样定义哦,否则会收不到消息void recieveJsMessage(const QString& jsMsg);
在 web 端的 js 端发送消息方式,要按你定义的 qtui 对象名称操作噢:
new QWebChannel(qt.webChannelTransport, function (channel) {var qtui = channel.objects.qtui;qtui.recieveJsMessage("你点我干啥!");
})
注意:html 端一定要加载 qwebchannel.js 文件,路径要正确。
程序跑起来结果:
七、程序Demo源码地址
https://github.com/lesliefish/Qt/tree/master/Project/WebTest
环境:vs2015+Qt5.9.6,完整源码,可直接运行。
装载于:https://blog.csdn.net/y396397735/article/details/84707031
(SAW:Game Over!)
Qt5 中 QWebEngineView 的使用,让桌面客户端和 web 端友好通信相关推荐
- QT -- TcpSocket实例,使用Qt中的tcp通信协议,构建客户端和服务端,实现局域网通信软件功能
Qt中使用Tcp构建通信客户端实现聊天信息发送连接等 1.简介 2.项目创建和界面构建 1)流程图 2)项目构建 3)界面构建 3.代码设计 1)项目pro添加 2)客户端设计 a. clientwi ...
- 【初识Netty使用Netty实现简单的客户端与服务端的通信操作Netty框架中一些重要的类以及方法的解析】
一.Netty是什么? Netty 由 Trustin Lee(韩国,Line 公司)2004 年开发 本质:网络应用程序框架 实现:异步.事件驱动 特性:高性能.可维护.快速开发 用途:开发服务器和 ...
- php winform通信,C# Winform 通过Socket实现客户端和服务端TCP通信
操作界面如下: 1.声明Socket 第一个参数:寻址方式,第二个参数:传输数据的方式,第三个参数:通信协议 Socket socket = new Socket(AddressFamily.Inte ...
- 【学习笔记】在windows下进行基于TCP的本地客户端和服务端socket通信
文章目录 socket介绍 java中使用socket 基于tcp的socket通信 使用ServerSocket类创建一个web服务器:(java) windows下的基于tcp的socket编程( ...
- java项目中使用支付宝支付(手机端,web端)--菜鸟小回
java项目中使用支付宝支付(手机端,web端) 文章目录 java项目中使用支付宝支付(手机端,web端) @[toc] 一.Spring boot项目代码 二.支付宝沙箱环境配置 1. 因为上面c ...
- android studio中使用AIDL进行客户端与服务端互相通信
前言 在AIDL实现IPC通信,调用远程服务端的方法.但是,远程服务端并不能主动给客户端返回信息.在很多情况下是需要远程服务端主动给客户端返回数据,客户端只需要进行监听即可,这是典型的观察者模式.这篇 ...
- 多个android手机客户端通信,android中利用Socket实现手机客户端与PC端进行通信
服务器端: import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOException; impo ...
- FTP的主动传输模式(PORT Mode)及被动传输模式(Passive Mode)(PASV)(FTP客户端 client 服务端 server 通信原理)
ftp> ? passive passive enter passive transfer mode 文章目录 FTP的特殊性 主动传输模式和被动传输模式 FTP的特殊性 大多数的TCP服务是使 ...
- 手机客户端和web端开发的异同
2019独角兽企业重金招聘Python工程师标准>>> 版本升级.用户角度上看,客户端升级必须让用户手动下载整个新的安装包覆盖安装,而web的升级无需用户做任何事情.开发角度上看,如 ...
最新文章
- 关于文件格式和编码方式,乱码产生的原因?
- SpringBoot开发接口
- 使用python的docker-py实现docker的api操作
- 下载MySQL并创建桌面数据库_sql桌面数据库
- mysql003操作表DDL
- mysql5.5安装配置 在阿里云服务器上 本地navicat连接
- 内核抢占会让内核调度更好吗?
- foobar2000播放器简单配置 [李园7舍_404]
- 爱词霸、QQ词典、海词在线词典API接口
- 爱荷华州立大学计算机科学,2019上海软科世界一流学科排名计算机科学与工程专业排名爱荷华州立大学排名第301-400...
- 面对SSD的步步紧逼,HDD依然奋斗不息
- Prometheus监控学习笔记之Prometheus普罗米修斯监控入门
- 运动式蓝牙耳机什么牌子好、运动式蓝牙耳机推荐
- POI DataValidation 删除数据有效性验证
- php 微信开发实战pdf,微信开发实战之模块化的实例详解
- (java)判断a是奇数还是偶数
- WuThreat身份安全云-TVD每日漏洞情报-2022-12-27
- 中国人都应记住的“中国”一百句名言
- 【EMNLP 2021】SimCSE:句子嵌入的简单对比学习 【CVPR 2021】理解对比学习损失函数及温度系数
- 2022.9.26初识c语言