Qt 与 HTML 进行交互的技术详解及实例应用

更新时间:2024-04-14 23:22:18   人气:1430
在现代软件开发中,Qt 框架以其跨平台、高效稳定的特点被广泛应用于桌面和嵌入式应用程序的构建。同时,在界面展示方面,HTML5 和相关 Web 技术则提供了丰富的内容展现能力和高度可定制性。为了结合两者的优点,Qt 提供了一种机制使得 C++ 编写的本地程序能够无缝集成并动态操控基于 HTML 的内容,这就是我们接下来要探讨的主题——Qt 与 HTML 的交互技术。

### **1. QWebEngineView 类**

QWebEngineView 是 Qt 中用于显示网页的主要类,它是基于 Chromium 渲染引擎实现的,能完美支持最新的 web 标准和技术(包括但不限于 CSS3、JavaScript 及 WebGL)。通过加载一个或多个 HTML 页面到该视图组件上,开发者可以在原生应用环境中呈现丰富的网络内容:

cpp

#include <QApplication>
#include <QWebEngineView>

int main(int argc, char *argv[])
{
QApplication app(argc, argv);

// 创建 QWebEngineView 实例
QWebEngineView view;

// 加载指定 URL 或者本地 HTML 文件资源
QString url = "https://www.example.com";
// or
QFile file("local.html");
if (file.open(QIODevice::ReadOnly | QIODevice::Text))
url = QStringLiteral("data:text/html;charset=utf-8,%1").arg(file.readAll());

view.load(QUrl(url));

view.show();

return app.exec();
}


### **2. JavaScript 与 Native API 相互调用**

为了让 Html 界面中的脚本可以操作 native 应用的功能,并且允许native代码触发Html页面上的行为变化,Qt提供了一个强大的双向通信桥梁:`QWebChannel`。

首先需要将C++对象注册至 `QWebChannel`:

cpp

class MyNativeObject : public QObject {
Q_OBJECT
public:
explicit MyNativeObject(QObject* parent = nullptr) {}
Q_INVOKABLE void doSomethingInCpp() { /* 执行一些C++逻辑 */ }
};

// 注册MyNativeObject到web通道
QWebEnginePage *page = webView->page();
QQmlContext *context = page->rootContext();
auto channel = new QWebChannel(this);
channel->registerObjects({{"myCppObject", new MyNativeObject}});
context->setContextProperty(QStringLiteral("__qt_internal"), channel);

page->setWebChannel(channel);

然后,在html侧可以通过`new QWebChannel(qt.webChannelTransport)`访问已注册的对象及其方法:
javascript

var myCppObject = window.__qt_internal.myCppObject;

function callCppMethod() {
myCppObject.doSomethingInCpp()
}

callCppMethod();


反之亦然,从C++端也可以直接调用JS函数:

cpp

QObject *localObject = ...; // 需要在js里暴露的方法所在的对象

QString script =
"if(window.someJsFunction)"
"{"
"window.someJsFunction('" + argForJsFn +"');"
"}";

view.page()->runJavaScript(script);


总之,借助于 Qt 内建的 QWebEngine模块,我们可以非常方便地让纯熟稳定的本地功能融合进充满活力与创新力的 HTML/JS 开发领域之中,从而为用户带来更加多元化的体验和服务。这一特性不仅极大地拓展了 Qt GUI 设计的可能性边界,同时也增强了其对于复杂业务场景的支持能力。