QWebChannel实现与JS的交互

QWebChannel实现与JS的交互
在利用Qt框架的QWebEngineView进行嵌入浏览器开发时，可以很方便的通过
QWebChannel实现与js的交互，本节内容简朴教学js与Qt应用程序相互发送消息。
最近做项目碰到了这个标题，发现网上的例子不全，许多都是单向通讯。本身实现了这部分，简朴记录一下
在使用Qt（C++）和JavaScript之间实现通讯时，通常会使用一些模块和技能来使两者能够交互和传递数据。这种通讯通常用于在Qt应用程序中嵌入Web内容，或者在Web页面中嵌入Qt应用程序。以下是一些常用的模块和技能，以及它们的作用
Qt WebEngine模块：
作用：Qt WebEngine是Qt中的Web引擎，答应在Qt应用程序中嵌入Web内容，包括JavaScript脚 本。它基于Chromium，提供了一个完备的Web浏览器引擎。
用法：您可以使用Qt WebEngine将Web页面嵌入到Qt应用程序中，并通过JavaScript与应用程序进行通讯。这可以通过JavaScript和C++之间的信号和槽机制来实现。
Qt QWebChannel模块：
作用：QWebChannel是一个用于在Qt和JavaScript之间进行通讯的模块。它使Qt中的C++对象能够通过WebSocket与嵌入在Web页面中的JavaScript进行通讯。
用法：您可以使用QWebChannel在Qt应用程序和Web页面之间传递数据和调用函数。如许，您可以在Qt中暴露C++对象，使其可以在JavaScript中访问，反之亦然。
Qt QJSEngine模块：
作用：QJSEngine是一个用于在Qt应用程序中执行JavaScript代码的模块。它答应您在C++中嵌入JavaScript，并在两者之间互换数据。
用法：您可以使用QJSEngine在Qt应用程序中执行JavaScript代码，并通过QJSEngine来访问C++对象和数据。这在须要动态执行和控制JavaScript代码的情况下很有用。
JavaScript与C++交互的桥接技能：
作用：除了上述Qt提供的模块，还可以使用其他桥接技能来实现JavaScript与C++之间的通讯，如Embind、Boost.JS等。这些技能答应在C++和JavaScript之间创建双向的函数调用和数据传递。
用法：您可以使用这些技能将C++函数暴露给JavaScript调用，并在C++中调用JavaScript函数。如许可以实现更紧密的集成和通讯。
pro文件参加模块引用

1. QT += webenginewidgets webchannel

复制代码

MyProjectWidget.h

1. #pragma once
2. #include <QWebEngineView>
3. #include <QtWebChannel>
4. #include <QtWidgets/QWidget>
5. #include <QPushButton>
6. #include "WebClass.h"
8. QT_BEGIN_NAMESPACE
9. namespace Ui { class MyProjectWidget; }
10. QT_END_NAMESPACE
12. class MyProjectWebView;
14. class MyProjectWidget : public QWidget {
15.     Q_OBJECT
17. public:
18.     explicit MyProjectWidget(QWidget *parent = nullptr);
19.     ~MyProjectWidget() override;
21. public Q_SLOTS:
22.     void sendToJS();
23.     void receiveFromJS(const QString &data);
25. private:
26.     Ui::MyProjectWidget *ui;
27.     QPushButton *button;
28.     QWebEngineView *webView = nullptr;
29.     QWebChannel *webChannel = nullptr;
30.     QWebEngineView *m_consoleView = nullptr;
32.     WebClass *webobj;
34.     int numer = 0;
35. };

复制代码

MyProjectWidget.cpp

1. #include "MyProjectWidget.h"
2. #include "ui_MyProjectWidget.h"
3. #include <QtCore/QSysInfo>
4. #include <QtCore/qglobal.h>
5. #include <QtNetwork/QHostInfo>
6. #include "MyProjectWebView.h"
7. #include <QShortcut>
10. MyProjectWidget::MyProjectWidget(QWidget *parent)
11. : QWidget(parent)
12. , ui(new Ui::MyProjectWidget) {
13.     ui->setupUi(this);
15.     button = new QPushButton ("Send Message to JavaScript");
17.     webView = new QWebEngineView(parent);
18. #ifdef QT_DEBUG
20.     // F12 调试窗口
21.     QShortcut* shortcut = new QShortcut(QKeySequence(Qt::Key_F12), this);
22.     setShortcutEnabled(shortcut->id(), true);
23.     QObject::connect(shortcut, &QShortcut::activated, this, [&]() mutable {
24.         if (m_consoleView == nullptr)
25.             m_consoleView = new QWebEngineView();
27.         webView->page()->setDevToolsPage(m_consoleView->page());
28.         webView->page()->triggerAction(QWebEnginePage::InspectElement);
29.         m_consoleView->show();
30.     });
31. #endif // QT_DEBUG
33.     //webView->load(QStringLiteral("qrc:/index.html"));
34.     webView->load(QUrl::fromLocalFile("F:\\test_qt\\js\\data\\index.html"));
36.     ui->vLayMain->addWidget(button);
37.     ui->vLayMain->addWidget(webView);
40.     webChannel = new QWebChannel;
41.     webobj = new WebClass();
42.     webChannel->registerObject("webobj", webobj);
43.     webView->page()->setWebChannel(webChannel);
45.     QObject::connect(button, &QPushButton::clicked, this, &MyProjectWidget::sendToJS);
47.     QObject::connect(webobj, &WebClass::strDataChanged, this, &MyProjectWidget::receiveFromJS);
48. }
50. MyProjectWidget::~MyProjectWidget() {
51.     delete ui;
52. }
54. void MyProjectWidget::sendToJS()
55. {
56.     QString numberstr = QString::number(numer++);
57.     QJsonObject json;
58.     json["key1"] = "https://kfb-dc-store.obs.cn-east-2.myhuaweicloud.com/123.xls";
59.     numberstr = QString::number(numer++);
60.     json["key2"] = "https://kfb-dc-store.obs.cn-east-2.myhuaweicloud.com/577.xls";
61.     webobj->setProperty("jsonData", json);
62. }
64. void MyProjectWidget::receiveFromJS(const QString &data)
65. {
66.     qDebug() << "receiveFromJS:" << data;
68.     QByteArray parameterArray = data.toUtf8();
69.     QJsonDocument jsonDocument = QJsonDocument::fromJson(parameterArray);
71.     qDebug() << "jsonDocument:" << jsonDocument;
72. }

复制代码

WebClass.h

1. #pragma once
3. #include <QtCore/QObject>
4. #include <QJsonObject>
5. #include <QMessageBox>
7. class WebClass : public QObject {
8.     Q_OBJECT
9.     Q_PROPERTY(QJsonObject jsonData MEMBER m_jsonData NOTIFY dataChanged)
10.     Q_PROPERTY(QString m_data MEMBER m_data NOTIFY strDataChanged)
12. public:
13.     WebClass(QObject* parent = nullptr){};
14.     ~WebClass() override {};
16. signals:
17.     void dataChanged(const QJsonObject &jsonData);
18.     void strDataChanged(const QString &data);
19. private:
20.     QJsonObject m_jsonData;
21.     QString m_data;
22. };

复制代码

main.cpp

1. #include <QApplication>
2. #include <QDesktopServices>
3. #include <QWebEnginePage>
4. #include <QWebEngineProfile>
5. #include <QWebEngineView>
6. #include "MyProjectWidget.h"
7. int main(int argc, char *argv[])
8. {
9.     QCoreApplication::setOrganizationName("QtExamples");
10.     QApplication app(argc, argv);
11.     MyProjectWidget myProject;
12.     myProject.show();
13.     return app.exec();
14. }

复制代码

index.html

1. <!DOCTYPE html>
2. <html xmlns="http://www.w3.org/1999/xhtml">
4. <head>
5.     <meta charset="utf-8">
6.     <!-- 引入 ECharts 文件 -->
7.     <script src="F:/test_qt/js/data/echarts.min.js"></script>
8.     <title>Fetch JSON Example</title>
9. </head>
10. <p id="x">x:</p>
11. <p id="y">y:</p>
12. <body>
13.     <script src="qwebchannel.js"></script>
14.     <script type="text/javascript">
15.     var webobj;
16.         new QWebChannel(qt.webChannelTransport, function (channel) {
17.                 webobj = channel.objects.webobj;
18.                 webobj.dataChanged.connect(function (arg) {
19.                     console.log(arg.key1);
20.                     x.innerHTML = arg.key1;
21.                     y.innerHTML = arg.key2;
22.                 });
23.             });
25.         function sendMessageToQt() {
26.             console.log("12354");
27.             const json = JSON.stringify({ key: 'value' ,age: "30", city: "New York"});
28.             webobj.m_data = json;
29.         }
30.     </script>
31.   <button onclick="sendMessageToQt()">Send Message to qt</button>
32. </body>
33. </html>

复制代码

如许就实现了qt和H5的json对象传递了。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。