更多精彩内容 |
---|
个人内容分类汇总 |
Qt - Web混合开发 |
webenginewidgets
只支持MSVC编译器,不支持MinGW(mingw好像需要自己编译);QtWebChannel
和qwebchannel.js
实现Qt和web通信;
QtWebChannel
使用registerObject()
函数注册一个用于通信的中介对象;javascript
加载qwebchannel.js
获取registerObject()
注册的中介对象,并通过获取的对象进行通信。
- 构建后将html、css、js文件【自动拷贝】到可执行程序路径下;
- web界面和qt界面实现【双向通信】,在web界面点击button后通过js将点击事件发送给qt,在Qt中通过槽函数接收显示;在Qt中点击button后将点击事件发送给js,在html界面中显示;
QT += webenginewidgets webchannel # 使用QWebEngineView和QWebchannel需要加载模块
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web客户端title>
<script src="qwebchannel.js">script>
<script src="main.js">script>
<link rel="stylesheet" type="text/css" href="main.css">
head>
<body>
<h1 align="center">Web客户端程序 h1>
<div align="center">
<textarea id="textAreaId" name="textArea">textarea> br>
<button id="but" class="button" onclick="butClick()">点击button>
div>
body>
html>
// 程序启动立即初始化
window.onload = function()
{
if(typeof qt != "undefined")
{
window.channel = new QWebChannel(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对象未获取到!");
}
}
// 显示信息
function showText(msg)
{
var textEdit = document.getElementById("textAreaId");
if(textEdit)
{
textEdit.value = textEdit.value + msg + '\n'; // 追加信息
textEdit.scrollTop = textEdit.scrollHeight; // 滚动条一直再最下方
}
}
// html中按键点击时调用这个函数
function butClick()
{
core.on_webButClicked("Web 按键点击"); // 调用Qt信号将js按键事件发送给Qt
}
#ifndef WIDGET_H
#define WIDGET_H
#include
QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE
class Widget : public QWidget
{
Q_OBJECT
public:
Widget(QWidget *parent = nullptr);
~Widget();
private slots:
void on_webButClicked(QString str);
void on_pushButton_clicked();
private:
Ui::Widget *ui;
};
/**
* @brief Qt和Web端交互的中介单例类
*/
class Core : public QObject
{
Q_OBJECT
public:
static Core* getInstance()
{
static Core core;
return &core;
}
signals:
/**
* @brief Qt发送给Web的信号
* @param str
*/
void qtButClicked(QString str);
/**
* @brief Web发送给Qt的信号
* @param str
*/
void webButClicked(QString str);
public slots:
/**
* @brief Web端需要调用Qt槽函数来传递,必须声明为public slots,否则web找不到
* @param str
*/
void on_webButClicked(QString str)
{
emit webButClicked(str);
}
};
#endif // WIDGET_H
#include "widget.h"
#include "ui_widget.h"
#include
#include
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 = new QWebChannel(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
*/
void Widget::on_webButClicked(QString str)
{
ui->textEdit->append(str);
}
/**
* @brief 点击按键将信号发送给web
*/
void Widget::on_pushButton_clicked()
{
static int i = 0;
emit Core::getInstance()->qtButClicked(QString("Qt 按键点击 %1").arg(i++));
}
➖➖⚽⚽⚽⚽
➖⚽⚽⚽⚽⚽⚽
⚽⚽⚽⚽⚽⚽⚽⚽
⚽⚽⚽⚽⚽⚽⚽⚽
⚽⚽⚽⚽⚽⚽⚽⚽
⚽⚽⚽⚽⚽⚽⚽⚽
➖⚽⚽⚽⚽⚽⚽
➖➖⚽⚽⚽⚽