QWebEngineView 是 Qt WebEngine 模块的一部分，提供一个用于显示网页内容的视图控件。它不仅能够显示静态 HTML 页面，还支持执行 JavaScript 代码，并与 C++ 应用程序进行双向通信，适用于构建富客户端应用或嵌入式浏览器场景。

在本案例中，QWebEngineView 与 JavaScript 结合实现温度计控制。温度计图表基于 ECharts 库，ECharts 是一个开源的 JavaScript 图表库，支持丰富的图表类型和交互功能。ECharts 可以在 QWebEngineView 中运行，依赖于 HTML、CSS 和 JavaScript 环境。

JS 调用 QT

在 JavaScript 中，window.qt 对象可以调用 C++ 中的函数。Qt 自动暴露此对象给 JavaScript 环境，通过 QWebChannel 注册和暴露 C++ 对象。例如，可以创建一个 C++ 类，包含控制温度计的函数，通过 QWebChannel 将其暴露给 JavaScript，后者可以像调用本地函数一样使用这些方法。

QT 调用 JS

Qt 提供了 QWebEnginePage::runJavaScript() 方法，允许在 C++ 代码中执行 JavaScript。这在需要根据应用程序状态更新界面或响应用户事件时非常有用。例如，可以在 C++ 中计算新的温度值，并通过 runJavaScript() 传递给 JavaScript 函数，更新温度计图表。

温度计绘制

在 JavaScript 中，可以使用 ECharts 库创建和控制温度计图表。ECharts 提供了丰富的配置项和 API，使得定制图表样式、数据和交互行为变得简便。温度计通常使用自定义的 Gauge 图表，通过设置 min、max、pointer 等属性展示温度值。

源代码分析

源代码中主要包括以下部分：

  • main.cpp：初始化 QApplication 和 QWebEngineView，加载 HTML 文件，并设置 QWebChannel。

  • webchannel.js：JavaScript 端的 QWebChannel 配置，连接 C++ 对象。

  • temperatureController.cpp/.h：C++ 类，包含控制温度的函数，通过 QWebChannel 暴露给 JavaScript。

  • index.html：包含 ECharts 温度计图表的 HTML 文件，调用 window.qt 对象的方法控制温度。

运行与调试

可执行文件可以直接运行，查看温度计控制效果。同时，可以通过调试源代码深入了解 C++ 与 JavaScript 之间的交互。