赞
踩
目录
最近刚好需要做一个Qt与Webview的交互,顺便写下整个的交互流程,给需要的各位参考学习。后面会补充,Qt上应用其他Web上的开源图标类的组件js库,例如EChart,vis.js等,通过 Qt+ +JavaScript+ QWebChannel +QWebEngineView 的组合,很多酷炫的效果都可以很方便的做出来。
Qt 5.6 引入了 Qt WebEngine 模块:
在过去,Qt 使用的是 Qt WebKit 作为其 Web 引擎。但自 Qt 5.6 版本开始,Qt 引入了基于 Chromium 的新的 Web 引擎,称为 Qt WebEngine。这个改变带来了更好的性能、更好的 HTML5 和 CSS3 支持以及更好的安全性。
QWebView 被 QWebEngineView 替代:
在使用 Qt WebKit 时,开发者使用 QWebView 类来显示 Web 内容。但是随着 Qt WebEngine 的引入,Qt 引入了 QWebEngineView 类来取代 QWebView。QWebEngineView 基于新的 Web 引擎,并提供了更现代化的 API 和功能。
引入了新的通信机制 - QWebChannel:
在 Qt WebEngine 中,引入了 QWebChannel 作为一种新的机制,用于在 C++ 代码和 JavaScript 代码之间进行通信。通过 QWebChannel,可以将 C++ 对象暴露给 JavaScript,使得它们可以相互调用和交互。
更好的扩展性和性能:
由于 Qt WebEngine 基于 Chromium,因此具有更好的性能和扩展性。它可以使用 Chromium 提供的各种功能和特性,包括先进的渲染引擎、多线程支持、GPU 加速等。
更新的 HTML5 和 CSS3 支持:
Qt WebEngine 提供了更现代化的 HTML5 和 CSS3 支持,使得开发者可以更轻松地创建丰富、交互性强的 Web 应用程序。
这些是 Qt 的 Web 引擎与 WebView 交互方面的一些主要变化。总的来说,随着 Qt WebEngine 的引入,Qt 在 Web 开发领域取得了重大进步,为开发者提供了更好的工具和功能来创建高性能的 Web 应用程序。
示例是完整Qt代码和Html文件,可以直接测试,注释也写了一些
通过QWebChannel进行注册和调用:
这种方法是在Qt中注册QObject对象,使其可以在JavaScript中调用。使用QWebChannel类来建立Qt与JavaScript之间的通信桥梁。
在Qt代码中,通过registerObject方法将QObject对象注册到QWebChannel中,然后在JavaScript中使用该对象。可以定义槽函数和属性,这些槽函数和属性可以在JavaScript中直接调用和访问。在JavaScript中调用这些槽函数来执行特定的操作,或者读取和设置属性。
这种方法适用于在Web页面中需要与Qt代码进行交互的场景,需要从Web页面中触发特定操作,并且在Qt代码中执行相应的处理时,或者需要在Web页面中显示Qt代码中的数据时这样做很方便。
如果想要简单的Qt调用JavaScript函数的话,就使用runJavaScript方法就行
总的来说,如果需要频繁地进行 C++ 和 JavaScript 之间的通信,使用连接信号与槽会更加方便和高效。而如果只是偶尔需要执行一些 JavaScript 代码,使用 `runJavaScript` 也是一个不错的选择。
- #pragma once
-
- #include <QWidget>
- #include <QJsonObject>
-
- class QWebEngineView;
- class QWebChannel;
-
- class frmgplot : public QWidget
- {
- Q_OBJECT
- /*Q_PROPERTY 定义了一个名为 jsonData 的属性,
- 其类型为 QJsonObject,并将其与一个名为 qtjsonData 的成员变量关联起来。
- 当qtjsonData改变时,会自动触发qtdataChanged信号
- 要在类中声明好 信号(qtdataChanged) 和 成员(qtjsonData)
- */
- Q_PROPERTY(QJsonObject jsonData MEMBER qtjsonData NOTIFY qtdataChanged)
- public:
- frmgplot(QWidget *parent);
- ~frmgplot();
-
- void initfrm();
-
- void setQtjsonData(const QJsonObject & jsonData);
-
- public slots:
- //js 调用qt函数,注意类型必须要是public slots:
- void jscallQt(const QString &str);
-
- private slots:
- void onPageLoadFinished(bool success);
-
- signals:
- //当qtjsonData改变时,会自动触发qtdataChanged信号
- void qtdataChanged(const QJsonObject &jsonData);
-
- private:
- QWebEngineView *m_webView;
- QWebChannel *m_webChannel;
- QJsonObject qtjsonData;
- };
- #include "frmgplot.h"
- #include <QWebEngineView>
- #include <QWebChannel>
- #include <QFileInfo>
- #include <QDir>
- #include <QApplication>
- #include <QVBoxLayout>
- #include <qmessagebox.h>
- #include <QTimer>
-
- frmgplot::frmgplot(QWidget *parent)
- : QWidget(parent)
- {
- //拿到示例后,别忘了在合适的时候 初始化initfrm
- }
-
- frmgplot::~frmgplot()
- {
- }
-
- void frmgplot::initfrm()
- {
- QVBoxLayout *layout = new QVBoxLayout(this);
- setLayout(layout);
-
- // 创建 Web 视图
- m_webView = new QWebEngineView(this);
- layout->addWidget(m_webView);
-
- // 创建 Web 通道
- m_webChannel = new QWebChannel(this);
- // 注册到 Web 页面,使 JavaScript 能够调用 Qt类里面的 槽函数
- m_webChannel->registerObject("frmplot", this);
- m_webView->page()->setWebChannel(m_webChannel);//设备交互通道
-
- // 加载 HTML 页面
- QString filePath = QFileInfo(QApplication::applicationDirPath() + "/web/gplot/js/index.html").absoluteFilePath();
-
- m_webView->load(QUrl::fromLocalFile(filePath));
-
- // 连接信号槽以在通道初始化后调用 JavaScript 函数
- connect(m_webView, &QWebEngineView::loadFinished, this, &frmgplot::onPageLoadFinished);
- }
-
-
- void frmgplot::onPageLoadFinished(bool success)
- {
- if (success) {
- // 页面加载完成后调用 JavaScript 函数
- // 创建定时器,延迟3秒后执行
- QTimer::singleShot(3000, this, [=]() {
- // 页面加载完成后调用 JavaScript 函数
- m_webView->page()->runJavaScript(QString("qtcalljsfunc('%1');").arg("qt call to js"));
- });
- }
- }
-
- void frmgplot::jscallQt(const QString &str)
- {
- QMessageBox::warning(this, QString::fromLocal8Bit("title"), str);
-
- /*示例:
- js 调用 qt 后,
- qt再次设置
- 属性jsonData 的qtjsonData成员,
- 让其改变 然后 触发信号qtdataChanged,从而让web 捕捉到qtdataChanged信号*/
- QJsonObject json;
- json["obj1"] = 1;
- json["obj2"] = 666.666;
- json["obj3"] = "this objstr";
- this->setProperty("jsonData", json);
- setQtjsonData(json);
- }
-
- void frmgplot::setQtjsonData(const QJsonObject &jsonData)
- {
- //if (qtjsonData != jsonData)
- {
- qtjsonData = jsonData;//会自动触发qtdataChanged
- }
- }
- <!doctype html>
- <html>
- <head>
- <title>Network</title>
- <script src="qwebchannel.js"></script>
- <style type="text/css">
- #mynetwork {
- width: 80vw; /* 设置为全屏宽度的 80% */
- height: 80vh; /* 设置为全屏高度的 80% */
- border: 1px solid lightgray;
- }
- /* 设置 body 和 html 的宽度和高度为100%,以使 #mynetwork 占据整个屏幕 */
- body, html {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- }
- </style>
- </head>
- <body>
- <button id="jscallqtbutton">js call qt</button>
- /*定义一个按钮*/
- <p>
- </p>
-
- <div id="mynetwork"></div>
-
- <script type="text/javascript">
-
- //----------- webchannel qt js 交互
-
- var updatejson=function(text){
- // 使用JSON.stringify将QJsonObject转换为字符串,然后再输出
- alert(JSON.stringify(text));
- }
-
- var webObject;
-
- // Connect to the QWebChannel
- new QWebChannel(qt.webChannelTransport, function(channel) {
- webObject = channel.objects.frmplot;
-
- window.foo = webObject;//对象赋值给了全局对象 window 的属性 foo
-
- //qt信号{qtdataChanged}与js函数连接,就像 qt的信号槽一样
- webObject.qtdataChanged.connect(updatejson);
-
- // 1: web view -> qt :web上按钮(jscallqtbutton)按下后,调用qt函数jscallQt
- document.getElementById("jscallqtbutton").onclick = function() {
- webObject.jscallQt("jscall-qt");
- alert("jscallQt");
- };
-
- //2:qt -> web js
- // 示例:在页面上显示jsonData的内容
- /* jsonDataDisplay = document.getElementById("jsonDataDisplay");
- jsonDataDisplay.innerHTML = JSON.stringify(jsonData);*/
-
- });
- //--------
-
- function qtcalljsfunc(text) {
- alert((text));
- }
-
- </script>
-
-
- </body>
- </html>
3.1 :Qt WebEngine locales directory not found at location 错误
这个警告是因为 Qt WebEngine 在运行时需要一些 ICU 数据文件,这些文件通常位于 Qt 的安装目录中。警告消息显示 Qt WebEngine 在指定的目录下找不到 ICU 数据文件,因此它会尝试从其他位置加载
在 Qt WebEngine 中,ICU 数据文件主要用于处理文字排版、文字渲染、国际化以及本地化等任务。因此,运行 Qt WebEngine 应用程序时,它会尝试加载这些 ICU 数据文件,以确保在不同地区和语言环境下能够正确地显示和处理文本。
icudtl.dat
是 Qt 框架使用的 ICU(International Components for Unicode)数据文件之一。
icudtl.dat
是在Qt的安装目录中的,在安装目录中搜索并且incudtl.dat和这些pak文件 复制到 执行文件相同层级目录下就可以了。*.pak
是 Qt WebEngine 中的资源文件,它们包含了用于支持开发者工具和其他功能所需的资源。注意拷贝时,要区分 对应版本 。
3.2 运行时 崩溃例如:m_webView->page()->setWebChannel(m_webChannel);或者其他地方莫名崩溃
QtWebEngineProcess.exe
是 Qt WebEngine 模块的一个子进程,用于在 Qt 应用程序中执行 Web 页面的渲染和相关任务。通常情况下,QtWebEngineProcess.exe
被设计为与主应用程序(.exe 文件)放置在同一目录下,这是为了便于它与主应用程序之间共享资源和进行通信,否则会出现各种莫名崩溃问题
继续补充:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。