0
0

QML QT6 WebEngineView 、Echarts使用和数据交互

QML 中的 

  1. WebEngineView

是用于显示网页内容的组件，它基于 Qt WebEngine，支持现代网页渲染和与 JavaScript 的交互。它通常用来在 QML 应用中嵌入浏览器或加载在线资源。

  1. WebEngineView

可以展示 HTML、CSS、JavaScript 等网页内容，并提供多种属性和方法来控制其行为。

如下是一个简单的demo和源码：

QML与Echarts图表

1.WebEngineView的主要属性

枚举 (

  1. enumeration

)

  1. ErrorDomain: 表示与 WebEngine 相关的错误类型的枚举，如网络错误、SSL 错误等。
  2. Feature: 用于控制浏览器功能的枚举，例如地理位置、媒体播放等。
  3. FindFlags: 搜索功能的标志，用于定义在页面中查找文本时的行为。
  4. JavaScriptConsoleMessageLevel: 控制台消息的等级，表示来自 JavaScript 控制台的消息重要性（例如，信息、警告、错误）。
  5. LifecycleState: 页面生命周期的状态，如 Active、Frozen、Discarded 等。
  6. LoadStatus: 表示页面加载的状态，例如 Loading, Loaded, Failed。
  7. PrintedPageOrientation: 打印时页面的方向（横向或纵向）。
  8. PrintedPageSizeId: 页面打印尺寸的枚举（如 A4, Letter 等）。
  9. RenderProcessTerminationStatus: 渲染进程终止的状态，如正常退出或崩溃退出。
  10. WebAction: 浏览器动作的枚举（如后退、前进、重新加载等）。

布尔属性 (

  1. bool

)

  1. activeFocusOnPress: 决定点击 WebEngineView 时是否获得焦点。
  2. audioMuted: 控制网页中的音频是否静音。
  3. canGoBack: 指示是否可以导航回历史记录中的前一个页面。
  4. canGoForward: 指示是否可以导航到历史记录中的下一个页面。
  5. isFullScreen: 是否当前页面处于全屏模式。
  6. loading: 页面是否正在加载。
  7. recentlyAudible: 指示网页是否最近有音频输出。

颜色属性 (

  1. color

)

  1. backgroundColor: 设置 WebEngineView 的背景颜色。

数字和几何属性

  1. contentsSize: 网页内容的大小。
  2. loadProgress: 页面加载进度，范围从 0 到 100。
  3. scrollPosition: 当前网页的滚动位置。
  4. renderProcessPid: 渲染进程的进程 ID。
  5. zoomFactor: 网页的缩放比例。

其他对象属性

  1. devToolsView: 用于显示开发者工具的 WebEngineView 实例。
  2. history: 提供对 WebEngineHistory 对象的访问，以获取或操作浏览历史记录。
  3. icon: 当前网页的图标（如网站的 favicon）。
  4. inspectedView: 被检查的 WebEngineView，用于调试时的场景。
  5. lifecycleState: 网页的生命周期状态（如 Active, Frozen）。
  6. profile: 当前 WebEngineView 的 WebEngineProfile，用于存储 cookie、缓存等。
  7. recommendedState: 推荐的页面生命周期状态。
  8. settings: 用于获取和设置与页面呈现相关的 WebEngineSettings。
  9. title: 当前页面的标题。
  10. url: 当前加载的页面 URL。
  11. userScripts: 包含网页上运行的用户脚本集合。
  12. webChannel: 用于 Web 与 QML 交互的 QQmlWebChannel 实例。
  13. webChannelWorld: 用于隔离不同 WebChannel 实例的 ID。

2.WebEngineView信号

信号解释

  1. activeFocusOnPressChanged(bool activeFocusOnPress)- 当 activeFocusOnPress 属性发生变化时发射的信号。这个属性控制是否在按下时将焦点设置为活动状态。
  2. audioMutedChanged(bool muted)- 当 audioMuted 属性的值发生变化时发射的信号。这个属性表示音频是否被静音。
  3. authenticationDialogRequested(AuthenticationDialogRequest request)- 当需要显示身份验证对话框时发射的信号。提供有关身份验证请求的信息。
  4. backgroundColorChanged()- 当 backgroundColor 属性发生变化时发射的信号。这个属性控制 WebEngineView 的背景颜色。
  5. certificateError(WebEngineCertificateError error)- 当遇到证书错误时发射的信号。提供有关证书错误的信息。
  6. colorDialogRequested(ColorDialogRequest request)- 当需要显示颜色选择对话框时发射的信号。提供有关颜色对话框请求的信息。
  7. contextMenuRequested(ContextMenuRequest request)- 当网页请求上下文菜单时发射的信号。提供上下文菜单请求的信息。
  8. featurePermissionRequested(url securityOrigin, Feature feature)- 当网页请求访问特定功能的权限时发射的信号。提供请求的来源和请求的功能信息。
  9. fileDialogRequested(FileDialogRequest request)- 当需要显示文件对话框时发射的信号。提供有关文件对话框请求的信息。
  10. findTextFinished(FindTextResult result)- 当文本查找操作完成时发射的信号。提供查找结果的信息。
  11. fullScreenRequested(FullScreenRequest request)- 当网页请求全屏模式时发射的信号。提供有关全屏请求的信息。
  12. geometryChangeRequested(rect geometry, rect frameGeometry)- 当 WebEngineView 的几何形状发生变化时发射的信号。提供新的几何形状和框架几何形状的信息。
  13. javaScriptConsoleMessage(JavaScriptConsoleMessageLevel level, string message, int lineNumber, string sourceID)- 当 JavaScript 控制台中有消息时发射的信号。提供消息的级别、内容、行号和来源 ID。
  14. javaScriptDialogRequested(JavaScriptDialogRequest request)- 当网页请求 JavaScript 对话框时发射的信号。提供有关对话框请求的信息。
  15. linkHovered(url hoveredUrl)- 当鼠标悬停在网页链接上时发射的信号。提供悬停的链接 URL。
  16. loadingChanged(WebEngineLoadingInfo loadingInfo)- 当加载状态发生变化时发射的信号。提供有关加载状态的信息。
  17. navigationRequested(WebEngineNavigationRequest request)- 当网页请求导航时发射的信号。提供导航请求的信息。
  18. newWindowRequested(WebEngineNewWindowRequest request)- 当网页请求打开新窗口时发射的信号。提供有关新窗口请求的信息。
  19. pdfPrintingFinished(string filePath, bool success)- 当 PDF 打印操作完成时发射的信号。提供打印结果和文件路径。
  20. printRequest()- 当网页请求打印时发射的信号。这个信号用于处理打印请求。
  21. quotaRequested(QuotaRequest request)- 当网页请求存储配额时发射的信号。提供配额请求的信息。
  22. recentlyAudibleChanged(bool recentlyAudible)- 当 recentlyAudible 属性发生变化时发射的信号。这个属性指示网页是否最近播放了音频。
  23. registerProtocolHandlerRequested(RegisterProtocolHandlerRequest request)- 当网页请求注册协议处理程序时发射的信号。提供协议处理程序请求的信息。
  24. renderProcessPidChanged(qint64 pid)- 当渲染进程的进程 ID 发生变化时发射的信号。提供新的进程 ID。
  25. renderProcessTerminated(RenderProcessTerminationStatus terminationStatus, int exitCode)- 当渲染进程终止时发射的信号。提供终止状态和退出代码。
  26. selectClientCertificate(WebEngineClientCertificateSelection clientCertificateSelection)- 当需要选择客户端证书时发射的信号。提供证书选择的信息。
  27. tooltipRequested(TooltipRequest request)- 当网页请求显示工具提示时发射的信号。提供工具提示请求的信息。
  28. touchSelectionMenuRequested(TouchSelectionMenuRequest *request)- 当需要显示触摸选择菜单时发射的信号。提供选择菜单请求的信息。
  29. wasRecentlyAudibleChanged(bool wasRecentlyAudible)- 当 wasRecentlyAudible 属性发生变化时发射的信号。这个属性指示网页是否最近播放过音频。
  30. windowCloseRequested()- 当网页请求关闭窗口时发射的信号。用于处理关闭窗口的请求。

3.WebEngineView方法

这些是 

  1. WebEngineView

提供的函数，用于操作和控制网页的各种功能。下面是每个函数的详细说明以及它们的用法示例：

1. 

  1. acceptAsNewWindow(QWebEngineNewWindowRequest *request)

功能: 处理新窗口请求。可以用来接受或拒绝打开新窗口的请求。

void acceptAsNewWindow(QWebEngineNewWindowRequest *request) {
// 接受新窗口请求
request->accept();
}

2. 

  1. WebEngineAction action(WebAction action)

功能: 执行特定的网页动作，比如刷新、前进、后退等。

void performAction(WebAction action) {
webEngineView->triggerWebAction(action);
}

3. 

  1. void findText(string subString, FindFlags options, variant resultCallback)

功能: 查找网页上的文本，并且可以指定查找选项和回调函数。

void searchText(const QString &text) {
webEngineView->findText(text, WebEngineFindFlags(), [](bool success, int matches) {
if (success) {
qDebug() << "Found" << matches << "matches.";
} else {
qDebug() << "Text not found.";
}
});
}

4. 

  1. void findText(string subString, FindFlags options)

功能: 查找网页上的文本，指定查找选项。

void searchText(const QString &text) {
webEngineView->findText(text, WebEngineFindFlags());
}

5. 

  1. void findText(string subString)

功能: 查找网页上的文本，不指定查找选项。

void searchText(const QString &text) {
webEngineView->findText(text);
}

6. 

  1. void fullScreenCancelled()

功能: 取消全屏模式。

void exitFullScreen() {
webEngineView->fullScreenCancelled();
}

7. 

  1. void goBack()

功能: 返回到上一个网页。

void navigateBack() {
if (webEngineView->canGoBack()) {
webEngineView->goBack();
}
}

8. 

  1. void goBackOrForward(int offset)

功能: 根据偏移量返回或前进到指定的网页。

void navigate(int offset) {
webEngineView->goBackOrForward(offset);
}

9. 

  1. void goForward()

功能: 前进到下一个网页。

void navigateForward() {
if (webEngineView->canGoForward()) {
webEngineView->goForward();
}
}

10. 

  1. void grantFeaturePermission(url securityOrigin, Feature feature, bool granted)

功能: 授予或拒绝网页访问特定功能的权限。

void setFeaturePermission(const QUrl &url, WebEngineFeature feature, bool granted) {
webEngineView->grantFeaturePermission(url, feature, granted);
}

11. 

  1. void loadHtml(string html, url baseUrl)

功能: 加载指定的 HTML 内容。

void loadHtmlContent(const QString &html) {
webEngineView->loadHtml(html, QUrl());
}

12. 

  1. void printToPdf(variant resultCallback, PrintedPageSizeId pageSizeId, PrintedPageOrientation orientation)

功能: 将网页内容打印为 PDF，并可以指定页面尺寸和方向，以及提供回调函数。

void printPdf(const QString &filePath) {
webEngineView->printToPdf(filePath, PrintedPageSizeId_A4, PrintedPageOrientation_Portrait);
}

13. 

  1. void printToPdf(const string filePath, PrintedPageSizeId pageSizeId, PrintedPageOrientation orientation)

功能: 将网页内容打印为 PDF，并指定文件路径、页面尺寸和方向。

void printPdf(const QString &filePath) {
webEngineView->printToPdf(filePath, PrintedPageSizeId_A4, PrintedPageOrientation_Portrait);
}

14. 

  1. void reload()

功能: 重新加载当前网页。

void reloadPage() {
webEngineView->reload();
}

15. 

  1. void reloadAndBypassCache()

功能: 重新加载当前网页并绕过缓存。

void reloadPageBypassingCache() {
webEngineView->reloadAndBypassCache();
}

16. 

  1. void replaceMisspelledWord(const QString &replacement)

功能: 替换网页中拼写错误的单词。

void replaceSpellCheckWord(const QString &replacement) {
webEngineView->replaceMisspelledWord(replacement);
}

17. 

  1. void runJavaScript(string script, variant callback)

功能: 执行指定的 JavaScript 代码，并可以提供回调函数获取执行结果。

void executeJavaScript(const QString &script) {
webEngineView->runJavaScript(script, [](const QVariant &result) {
qDebug() << "JavaScript result:" << result;
});
}

18. 

  1. void setActiveFocusOnPress(bool arg)

功能: 设置是否在按下时将焦点设置为活动状态。

void setFocusOnPress(bool enable) {
webEngineView->setActiveFocusOnPress(enable);
}

19. 

  1. void stop()

功能: 停止当前加载的网页。

void stopLoading() {
webEngineView->stop();
}

20. 

  1. void triggerWebAction(WebAction action)

功能: 触发特定的网页动作，如刷新、前进、后退等。

void triggerAction(WebAction action) {
webEngineView->triggerWebAction(action);
}

4.QML 的

  1. WebEngineView

和 HTML 页面的相互通信

下面我将详细说明如何通过 

  1. QWebChannel

和 

  1. qwebchannel.js

实现数据交互，并提供完整的代码示例。

  1. QML 和 HTML 交互的基本概念

**

  1. WebEngineView

** 是 QML 中用于显示网页内容的组件。为了让 QML 与网页中的 JavaScript 进行通信，我们使用 Qt 提供的 **

  1. QWebChannel

**，它需要在 HTML 页面中引入 

  1. qwebchannel.js

，以便可以从 JavaScript 端访问 QML 暴露的对象和方法。

  1. 通信流程的关键点

  2. 在 QML 中注册对象：你需要在 QML 中注册一个对象（可以是任何 QML 对象、属性、方法）给 WebChannel，这样在 HTML 中可以访问这个对象。

  3. **在 HTML 中引入 qwebchannel.js**：这是 JavaScript 与 QML 交互的桥梁，能够在网页端访问 QML 中注册的对象。

  4. 数据交互：通过 QWebChannel，网页可以调用 QML 中的方法，并通过信号机制将数据从 QML 发送到网页端。

  5. 代码示例

Step 1: 在 QML 中设置 

  1. WebEngineView

  1. import QtQuick 
  2.  import QtWebEngine 
  3.  import QtWebChannel
  1. Rectangle {
  2.      width: 800
  3.      height: 600
  1.     WebEngineView {
  2.          id: webView
  3.          anchors.fill: parent
  4.          url: "qrc:/web/index.html"  // 加载本地 HTML 文件
  1.         WebChannel {
  2.              id: webChannel
  3.              registeredObjects: {
  4.                  "qmlObject": backendObject  // 注册 QML 对象给 HTML
  5.              }
  6.          }
  7.      }
  1.     // 定义 QML 中的对象，这个对象将被 HTML 访问
  2.      QtObject {
  3.          id: backendObject
  1.         property string message: "Hello from QML"
  1.         function someMethod() {
  2.              console.log("someMethod called from HTML");
  3.          }
  1.         signal sendMessageToHtml(string message)  // 信号，用于将数据传递到 HTML
  2.      }
  3.  }

解释：

  • WebEngineView 用于加载本地的 HTML 文件。
  • WebChannel 用于注册 backendObject，使其在 HTML 中可用。
  • 当网页加载完成时，通过 runJavaScript() 执行 HTML 中的 connectToQml() 函数。

Step 2: 在 HTML 中引入 

  1. qwebchannel.js

在你的 

  1. index.html

文件中：

<!DOCTYPE html> <html> <head> <title>QML and HTML Interaction</title> <script type="text/javascript" src="qrc:/qtwebchannel/qwebchannel.js"></script> </head> <body>

Web and QML Interaction

  1. <!-- 一个简单的按钮，点击时从 HTML 调用 QML 方法 -->
  2.  <button οnclick="sendToQml()">Send Message to QML</button>
  4. <script type="text/javascript">
  5.      // 连接到 QML 中的 WebChannel
  6.      function connectToQml() {
  7.          new QWebChannel(qt.webChannelTransport, function(channel) {
  8.              // 从 QML 获取对象 qmlObject
  9.              window.qmlObject = channel.objects.qmlObject;
  11.             // 调用 QML 中的属性
  12.              console.log("Message from QML: " + qmlObject.message);
  14.             // 监听 QML 信号
  15.              qmlObject.sendMessageToHtml.connect(function(message) {
  16.                  alert("Message received from QML: " + message);
  17.              });
  18.          });
  19.      }
  21.     // 调用 QML 中的方法
  22.      function sendToQml() {
  23.          qmlObject.someMethod();
  24.      }
  25.  </script>
</body> </html>

解释：

  • **qwebchannel.js**：通过 <script> 引入，这是与 QML 交互的核心。
  • **connectToQml()**：这是网页加载后被调用的函数，初始化 QWebChannel 并获取 QML 暴露的对象 qmlObject。
  • 数据交互：网页端可以通过 qmlObject 访问 QML 的属性和方法，例如调用 qmlObject.someMethod() 来触发 QML 中的函数。
  • 监听 QML 信号：qmlObject.sendMessageToHtml 是从 QML 向 HTML 发送消息的信号，HTML 中监听这个信号后可以弹出提示信息。

Step 3: 从 QML 向 HTML 发送数据

你可以在 QML 中触发信号，将数据传递给 HTML：

// 在合适的位置触发信号
backendObject.sendMessageToHtml("Hello from QML to HTML");

当信号 

  1. sendMessageToHtml

被触发时，网页中的 JavaScript 会收到消息并执行回调函数。

5. 总结

通过这个完整的流程，你可以看到如何在 QML 和 HTML 中使用 

  1. WebEngineView

和 

  1. QWebChannel

进行双向的数据交互：

  1. QML 向 HTML 发送数据：通过 runJavaScript() 调用网页端的函数，并通过 QWebChannel 触发信号。
  2. HTML 向 QML 发送数据：通过 qmlObject 调用 QML 暴露的方法，实现从网页向 QML 传递数据。
  3. 双向通信：通过 QWebChannel，实现网页和 QML 之间的实时双向通信，网页可以调用 QML 的方法，QML 也可以触发事件发送数据到网页。

这种方法非常适合需要在 QML 和 HTML 中进行复杂交互的场景，如数据可视化、动态内容更新等。

标签： echarts 交互 前端
本文转载自: https://blog.csdn.net/qq_50373827/article/details/142324723
版权归原作者 Qfuuu 所有， 如有侵权，请联系我们删除。
登录后发布评论

“QML QT6 WebEngineView 、Echarts使用和数据交互”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？