Qt-Web混合开发-QtWebChannel实现Qt与Web通信交互🍏
文章目录
更多精彩内容👉个人内容分类汇总 👈👉Qt - Web混合开发👈
1、概述🍓
- Qt版本：V5.12.5
- 注意：windows下
webenginewidgets只支持MSVC编译器，不支持MinGW（mingw好像需要自己编译）； - 当使用QWebEngineView实现Qt + html混合开发时经常遇见的问题就是Qt自身有信号槽，但是和web网页怎么通信，web里又没有信号槽，第一时间想到的是socket通信，但是Qt其实封装了更加简单便捷的通信方式，可使用
QtWebChannel和qwebchannel.js实现Qt和web通信； - QtWebChannel可用于和QWebEngineView内嵌的网页通信，也可以和浏览器中显示的网页进行通信；- 和QWebEngineView内嵌的网页通信需要在QtWebChannel使用registerObject()函数注册一个用于通信的中介对象;- 然后将QtWebChannel对象设置给QWebEngineView；- 在网页中使用javascript加载qwebchannel.js获取registerObject()注册的中介对象，并通过获取的对象进行通信。
2、实现效果🍅
3、实现功能🥝
- 构建后将html、css、js文件【自动拷贝】到可执行程序路径下；
- web界面和qt界面实现【双向通信】，在web界面点击button后通过js将点击事件发送给qt，在Qt中通过槽函数接收显示；在Qt中点击button后将点击事件发送给js，在html界面中显示；
4、关键代码🌽
- pro文件
QT += webenginewidgets webchannel # 使用QWebEngineView和QWebchannel需要加载模块
- webClient.html
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Web客户端</title><!-- qwebchannel.js文件一般在Qt安装路径下 D:\Qt\Qt5.12.5\Examples\Qt-5.12.5\webchannel\shared\qwebchannel.js--><scriptsrc="qwebchannel.js"></script><scriptsrc="main.js"></script><linkrel="stylesheet"type="text/css"href="main.css"></head><body><h1align="center">Web客户端程序 </h1><divalign="center"><textareaid="textAreaId"name="textArea"></textarea></br><buttonid="but"class="button"onclick="butClick()">点击</button></div></body></html>
- main.js
// 程序启动立即初始化
window.onload=function(){if(typeof qt !="undefined"){
window.channel =newQWebChannel(qt.webChannelTransport,function(channel){// 获取Qt注册的对象，Qt中registerObject注册的字符串
window.core = channel.objects.CoreId;// 将函数showText和Qt信号qtButClicked绑定
core.qtButClicked.connect(function(msg){showText(msg);});});}else{alert("qt对象未获取到！");}}// 显示信息functionshowText(msg){var textEdit = document.getElementById("textAreaId");if(textEdit){
textEdit.value = textEdit.value + msg +'\n';// 追加信息
textEdit.scrollTop = textEdit.scrollHeight;// 滚动条一直再最下方}}// html中按键点击时调用这个函数functionbutClick(){
core.on_webButClicked("Web 按键点击");// 调用Qt信号将js按键事件发送给Qt}
- widget.h：注意，这里的 Core 类是Qt和Js通信的关键；
#ifndefWIDGET_H#defineWIDGET_H#include<QWidget>
QT_BEGIN_NAMESPACE
namespace Ui {classWidget;}
QT_END_NAMESPACE
classWidget:publicQWidget{
Q_OBJECT
public:Widget(QWidget *parent =nullptr);~Widget();private slots:voidon_webButClicked(QString str);voidon_pushButton_clicked();private:
Ui::Widget *ui;};/**
* @brief Qt和Web端交互的中介单例类
*/classCore:publicQObject{
Q_OBJECT
public:static Core*getInstance(){static Core core;return&core;}
signals:/**
* @brief Qt发送给Web的信号
* @param str
*/voidqtButClicked(QString str);/**
* @brief Web发送给Qt的信号
* @param str
*/voidwebButClicked(QString str);public slots:/**
* @brief Web端需要调用Qt槽函数来传递，必须声明为public slots，否则web找不到
* @param str
*/voidon_webButClicked(QString str){
emit webButClicked(str);}};#endif// WIDGET_H
- widget.cpp
#include"widget.h"#include"ui_widget.h"#include<qdir.h>#include<qwebchannel.h>Widget::Widget(QWidget *parent):QWidget(parent),ui(new Ui::Widget){
ui->setupUi(this);this->setWindowTitle(QString("使用QtWebChannel实现Qt与Web通信交互 - V%1").arg(APP_VERSION));// 设置窗口标题connect(Core::getInstance(),&Core::webButClicked,this,&Widget::on_webButClicked);
QWebChannel* channel =newQWebChannel(this);
channel->registerObject("CoreId",Core::getInstance());// 向QWebChannel注册用于Qt和Web交互的对象。
ui->webEngineView->page()->setWebChannel(channel);// 将与webEngineView要使用的web通道实例设置为channel
ui->webEngineView->setUrl(QDir("./web/webClient.html").absolutePath());}Widget::~Widget(){delete ui;}/**
* @brief 显示web传来的信号
* @param str
*/voidWidget::on_webButClicked(QString str){
ui->textEdit->append(str);}/**
* @brief 点击按键将信号发送给web
*/voidWidget::on_pushButton_clicked(){staticint i =0;
emit Core::getInstance()->qtButClicked(QString("Qt 按键点击 %1").arg(i++));}
5、源代码🍆
- gitee
- github
➖➖⚽⚽⚽⚽
➖⚽⚽⚽⚽⚽⚽
⚽⚽⚽⚽⚽⚽⚽⚽
⚽⚽⚽⚽⚽⚽⚽⚽
⚽⚽⚽⚽⚽⚽⚽⚽
⚽⚽⚽⚽⚽⚽⚽⚽
➖⚽⚽⚽⚽⚽⚽
➖➖⚽⚽⚽⚽
本文转载自: https://blog.csdn.net/qq_43627907/article/details/128320937
版权归原作者 mahuifa 所有， 如有侵权，请联系我们删除。
版权归原作者 mahuifa 所有， 如有侵权，请联系我们删除。