HTML如何调用QT_HTML与Qt应用（嵌入式）交互与调用方法-html教程-PHP中文网

HTML如何调用QT_HTML与Qt应用（嵌入式）交互与调用方法

星夢妙者

发布： 2025-11-15 18:55:38

原创

592人浏览过

使用Qt WebEngine和WebChannel实现嵌入式系统中HTML与C++双向通信。1. 在.pro文件添加webengine webchannel模块，创建QWebEngineView加载本地HTML；2. 定义QObject派生类作为JS调用接口，通过QWebChannel注册对象；3. HTML引入qwebchannel.js，初始化后调用C++方法并监听信号；4. C++触发信号即可向JS发送消息。该方案适用于嵌入式设备的界面交互，需注意平台对WebEngine的支持。

html如何调用qt_html与qt应用（嵌入式）交互与调用方法

在嵌入式系统中，使用Qt开发的应用常需要与HTML界面进行交互。这种交互通常通过Qt的Web引擎模块（如 Qt WebEngine 或 Qt WebKit）实现，将HTML页面嵌入到Qt应用中，并通过JavaScript桥接实现双向通信。

1. 使用Qt WebEngine加载HTML页面

Qt推荐使用 Qt WebEngine 模块替代旧的WebKit，它基于Chromium，支持现代HTML5/CSS3/JS功能，适合嵌入式设备上的富界面展示。

基本步骤：

在项目文件（.pro）中添加：
QT += webengine webchannel
创建 QWebEngineView 并加载本地HTML文件：

#include <QWebEngineView>
#include <QWebChannel>

QWebEngineView *view = new QWebEngineView(this);
view->load(QUrl("qrc:/html/index.html")); // HTML可打包进资源文件
view->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
this->layout()->addWidget(view);

2. 实现C++与JavaScript双向通信（Qt WebChannel）

Qt WebChannel 提供了一种机制，让HTML中的JavaScript可以直接调用Qt C++对象的方法，反之亦然。

立即学习“前端免费学习笔记（深入）”；

步骤如下：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

定义一个可被JS调用的C++类，继承 QObject，并使用 Q_OBJECT 宏：

class HtmlBridge : public QObject {
Q_OBJECT
public:
explicit HtmlBridge(QObject *parent = nullptr) : QObject(parent) {}

public slots:
void jsCallCppMethod(const QString &msg) {
qDebug() << "JS传来的消息:" << msg;
}

signals:
void sendToJS(const QString &response);
};

将该对象注册到 WebChannel，并与页面共享：

QWebChannel *channel = new QWebChannel(this);
HtmlBridge *bridge = new HtmlBridge(this);
channel->registerObject("qtHtmlBridge", bridge);
view->page()->setWebChannel(channel);

3. HTML/JavaScript中调用Qt方法

在HTML页面中引入 qwebchannel.js（Qt提供，需复制到资源或路径中），然后建立连接。

JavaScript初始化通道并调用C++方法：

new QWebChannel(qt.webChannelTransport, function(channel) {
var bridge = channel.objects.qtHtmlBridge;

// 调用C++方法
bridge.jsCallCppMethod("Hello from JS!");

// 监听来自C++的信号
bridge.sendToJS.connect(function(response) {
console.log("收到C++消息:", response);
});
});