### **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 设计的可能性边界,同时也增强了其对于复杂业务场景的支持能力。