QWebChannel 是 Qt 提供的一种机制，用于在 Qt 应用程序和 Web 页面（JavaScript）之间进行双向通信。它基于 Qt WebEngine 或 Qt WebKit，允许将 Qt 对象暴露给 JavaScript，并允许 JavaScript 调用这些对象的方法或访问其属性，同时也可以从 Qt 端向 JavaScript 发送信号。

以下是使用 QWebChannel 实现 Windows 桌面应用程序（Qt）和 Web 页面（JavaScript）之间通信的详细步骤。

1. 环境准备

确保你的 Qt 项目已经集成了 Qt WebEngine 模块，并且在 .pro 文件中添加了相关模块：

QT += webenginewidgets webchannel

2. Qt 端实现

2.1 创建一个 Qt 对象供 JavaScript 调用

首先，创建一个继承自 QObject 的类，并使用 Q_PROPERTY 和 Q_INVOKABLE 宏定义属性和方法，以便 JavaScript 可以访问和调用它们。

// myobject.h
#ifndef MYOBJECT_H
#define MYOBJECT_H

#include <QObject>

class MyObject : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString message READ message WRITE setMessage NOTIFY messageChanged)

public:
    explicit MyObject(QObject *parent = nullptr);

    QString message() const;
    void setMessage(const QString &msg);

signals:
    void messageChanged(const QString &newMessage);
    void sendMessageToJS(const QString &msg);

public slots:
    void receiveMessageFromJS(const QString &msg);

private:
    QString m_message;
};

#endif // MYOBJECT_H

// myobject.cpp
#include "myobject.h"
#include <QDebug>

MyObject::MyObject(QObject *parent) : QObject(parent), m_message("Hello from Qt!") {}

QString MyObject::message() const {
    return m_message;
}

void MyObject::setMessage(const QString &msg) {
    if (m_message != msg) {
        m_message = msg;
        emit messageChanged(m_message);
    }
}

void MyObject::receiveMessageFromJS(const QString &msg) {
    qDebug() << "Received from JS:" << msg;
    // 可以在这里处理来自 JavaScript 的消息
    emit sendMessageToJS("Hello from Qt after receiving your message!");
}

2.2 设置 QWebChannel 并注册对象

在你的主窗口或主类中，设置 QWebEngineView 和 QWebChannel，并将 MyObject 注册到 QWebChannel 中。

// mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QWebEngineView>
#include <QWebChannel>
#include "myobject.h"

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
    QWebEngineView *webView;
    QWebChannel *webChannel;
    MyObject *myObject;
};

#endif // MAINWINDOW_H

// mainwindow.cpp
#include "mainwindow.h"
#include <QVBoxLayout>
#include <QWebEnginePage>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(nullptr)
    , webView(new QWebEngineView(this))
    , webChannel(new QWebChannel(this))
    , myObject(new MyObject(this))
{
    setCentralWidget(webView);

    // 设置 WebChannel 并注册对象
    webChannel->registerObject(QStringLiteral("myObject"), myObject);
    webView->page()->setWebChannel(webChannel);

    // 加载本地 HTML 文件或远程 URL
    QString path = QCoreApplication::applicationDirPath() + "/index.html";
    webView->setUrl(QUrl::fromLocalFile(path));
}

MainWindow::~MainWindow()
{
}

2.3 配置 Qt WebChannel 的 JavaScript 库

为了让 Web 页面能够使用 QWebChannel，需要将 Qt 提供的 qwebchannel.js 文件包含到你的 HTML 页面中。这个文件通常位于 Qt 安装目录下的 resources/webchannel 文件夹中，例如：

<Qt安装路径>/Examples/Qt-<版本>/webchannel/shared/resources/qwebchannel.js

将该文件复制到你的项目资源中，或者直接引用本地路径。

3. Web 端实现

3.1 引入 qwebchannel.js

在你的 HTML 文件中引入 qwebchannel.js，并初始化 QWebChannel。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>QWebChannel 示例</title>
    <!-- 引入 qwebchannel.js -->
    <script src="qwebchannel.js"></script>
</head>
<body>
    <h1>QWebChannel 示例</h1>
    <p>来自 Qt 的消息：<span id="qt-message">等待消息...</span></p>
    <input type="text" id="js-input" placeholder="输入消息发送到 Qt"/>
    <button id="send-btn">发送到 Qt</button>

    <script>
        // 初始化 QWebChannel
        new QWebChannel(qt.webChannelTransport, function(channel) {
            // 获取注册的对象
            const myObject = channel.objects.myObject;

            // 监听来自 Qt 的信号
            myObject.sendMessageToJS.connect(function(message) {
                document.getElementById('qt-message').innerText = message;
            });

            // 访问和修改 Qt 对象的属性
            document.getElementById('qt-message').innerText = myObject.message;

            // 监听属性变化
            myObject.messageChanged.connect(function(newMessage) {
                document.getElementById('qt-message').innerText = newMessage;
            });

            // 发送消息到 Qt
            document.getElementById('send-btn').onclick = function() {
                const msg = document.getElementById('js-input').value;
                if (msg) {
                    myObject.receiveMessageFromJS(msg);
                    document.getElementById('js-input').value = '';
                }
            };
        });
    </script>
</body>
</html>

3.2 关键点说明

qt.webChannelTransport：这是 Qt 提供的传输对象，用于在 Web 页面和 Qt 之间建立通信通道。确保在加载 HTML 页面时，QWebChannel 已经正确设置并绑定到 QWebEnginePage。
注册对象：在 Qt 端通过 webChannel->registerObject 注册的对象，在 JavaScript 中可以通过 channel.objects.<对象名> 访问。
信号与槽：
- 在 Qt 端定义的信号（如 sendMessageToJS）可以在 JavaScript 中通过 .connect 方法连接回调函数。
- 在 JavaScript 中调用 Qt 对象的方法（如 receiveMessageFromJS）可以触发 Qt 端的槽函数。

4. 运行示例

确保文件路径正确：将 qwebchannel.js 放在与 HTML 文件相同的目录，或者根据实际路径调整 <script src="qwebchannel.js"></script> 的引用。
编译并运行 Qt 应用程序：启动你的 Qt 应用程序，QWebEngineView 会加载 HTML 页面，并建立 QWebChannel 通信。
测试通信：
- 页面加载后，JavaScript 会显示来自 Qt 的初始消息。
- 在输入框中输入消息并点击“发送到 Qt”按钮，JavaScript 会调用 Qt 对象的方法，Qt 端会接收到消息并打印到控制台，同时发送一个响应消息回 JavaScript，更新页面上的消息显示。

5. 注意事项

线程安全：确保 QWebChannel 和相关对象在主线程中使用，避免多线程问题。
对象生命周期：注册到 QWebChannel 的对象需要保持有效，直到通信结束。如果对象被销毁，JavaScript 端的引用将失效。
调试：可以使用 Qt 的调试工具（如 QDebug）和浏览器的开发者工具（F12）来调试通信过程，查看信号是否正确发送和接收。
跨域问题：如果加载的是远程 URL，确保处理好跨域问题，或者使用本地服务器进行开发和测试。

6. 扩展应用

QWebChannel 不仅支持简单的信号与槽通信，还可以用于更复杂的场景，例如：

双向数据绑定：利用 Q_PROPERTY 和信号槽机制，实现 JavaScript 和 Qt 对象之间的双向数据绑定。
复杂对象传递：传递自定义的复杂对象，通过 Q_PROPERTY 和 Q_INVOKABLE 提供接口。
集成第三方 Web 库：将 Qt 与现有的 Web 前端框架（如 React、Vue 等）集成，实现混合应用开发。

通过以上步骤，你可以轻松地在 Windows 桌面应用程序（Qt）和 Web 页面（JavaScript）之间建立双向通信，实现丰富的交互功能。

QWebChannel通信原理

QWebChannel 是 Qt 提供的一个机制，用于在 Qt 应用程序（通常是 C++ 编写的桌面应用） 和 Web 页面（JavaScript） 之间实现 双向通信。它允许将 Qt 对象暴露给 JavaScript，使 JavaScript 能够调用 Qt 对象的方法、访问其属性，并接收 Qt 发出的信号。同时，JavaScript 对象也可以通过 QWebChannel 暴露给 Qt，实现双向的数据交换和方法调用。

要深入理解 QWebChannel 的原理，我们需要从以下几个方面进行分析：

通信机制的基础
Qt 端的实现
Web 端的实现
消息传递与序列化
信号与槽机制的支持
整体工作流程

下面将逐一详细解析这些组成部分，帮助你全面理解 QWebChannel 的工作原理。

1. 通信机制的基础

QWebChannel 的通信基于 客户端-服务器模型，其中：

Qt 应用程序 充当 服务器，通过 QWebChannel 提供对象和服务。
Web 页面 充当 客户端，通过 JavaScript 连接到 Qt 提供的 WebChannel，并与之交互。

这种架构允许双向的数据传输和方法调用，实现真正的双向通信。

底层传输协议

QWebChannel 通常依赖于 WebSocket 或 类似的实时通信协议 来实现消息的实时传输。具体来说：

Qt WebEngine 模块（基于 Chromium）提供了与 Web 页面的集成，通过内部的通信机制（如 WebSocket）实现消息传递。
消息以 JSON 格式进行序列化和反序列化，确保跨语言和跨平台的数据交换。

2. Qt 端的实现

在 Qt 端，QWebChannel 的实现主要包括以下几个部分：

2.1 QWebChannel 类

QWebChannel 是核心类，负责管理客户端连接、注册对象以及处理消息的收发。

主要功能：
- 注册 Qt 对象，使其对 JavaScript 可见和可调用。
- 处理来自 Web 端的消息，调用相应的 Qt 对象方法或更新属性。
- 将 Qt 对象的信号发送到 Web 端。
关键方法：
- registerObject(const QString &name, QObject *object)：将一个 Qt 对象注册到 WebChannel，使其可以通过指定的名称在 JavaScript 中访问。
- setWebChannelTransport(QWebChannelAbstractTransport *transport)：设置传输层，用于与 Web 端进行通信。

2.2 QWebChannelAbstractTransport 类

QWebChannelAbstractTransport 是一个抽象基类，定义了 Qt 与 Web 端之间的通信接口。具体的实现类（如基于 WebSocket 的传输类）需要继承并实现其纯虚函数。

主要功能：
- 发送消息到 Web 端。
- 接收来自 Web 端的消息，并传递给 QWebChannel 进行处理。

2.3 QObject 的暴露机制

Qt 对象通过 Q_PROPERTY 和 Q_INVOKABLE 宏定义其可被 JavaScript 访问的属性和方法。

Q_PROPERTY：用于定义对象的属性，支持读取、写入和通知信号。
Q_INVOKABLE：用于标记可调用的方法，使 JavaScript 能够调用这些方法。

示例代码

// MyObject.h
#ifndef MYOBJECT_H
#define MYOBJECT_H

#include <QObject>

class MyObject : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString message READ message WRITE setMessage NOTIFY messageChanged)

public:
    explicit MyObject(QObject *parent = nullptr);

    QString message() const;
    void setMessage(const QString &msg);

signals:
    void messageChanged(const QString &newMessage);
    void sendMessageToJS(const QString &msg);

public slots:
    void receiveMessageFromJS(const QString &msg);

private:
    QString m_message;
};

#endif // MYOBJECT_H

// MyObject.cpp
#include "MyObject.h"
#include <QDebug>

MyObject::MyObject(QObject *parent) : QObject(parent), m_message("Hello from Qt!") {}

QString MyObject::message() const {
    return m_message;
}

void MyObject::setMessage(const QString &msg) {
    if (m_message != msg) {
        m_message = msg;
        emit messageChanged(m_message);
    }
}

void MyObject::receiveMessageFromJS(const QString &msg) {
    qDebug() << "Received from JS:" << msg;
    emit sendMessageToJS("Hello from Qt after receiving your message!");
}

2.4 注册对象到 WebChannel

在 Qt 应用程序中，需要将 MyObject 注册到 QWebChannel，以便 JavaScript 可以访问它。

// mainwindow.cpp
#include "mainwindow.h"
#include <QWebEngineView>
#include <QWebChannel>
#include "MyObject.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , webView(new QWebEngineView(this))
    , webChannel(new QWebChannel(this))
    , myObject(new MyObject(this))
{
    // 设置 WebChannel 并注册对象
    webChannel->registerObject(QStringLiteral("myObject"), myObject);
    webView->page()->setWebChannel(webChannel);

    // 加载本地 HTML 文件或远程 URL
    QString path = QCoreApplication::applicationDirPath() + "/index.html";
    webView->setUrl(QUrl::fromLocalFile(path));
}

3. Web 端的实现

在 Web 端，QWebChannel 的实现依赖于 qwebchannel.js，这是 Qt 提供的一个 JavaScript 库，用于与 Qt 的 QWebChannel 进行通信。

3.1 引入 qwebchannel.js

qwebchannel.js 需要在 Web 页面中引入，通常位于 Qt 的安装目录下的 resources/webchannel 文件夹中，或者可以自行下载并包含在项目中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>QWebChannel 示例</title>
    <!-- 引入 qwebchannel.js -->
    <script src="qwebchannel.js"></script>
</head>
<body>
    <h1>QWebChannel 示例</h1>
    <p>来自 Qt 的消息：<span id="qt-message">等待消息...</span></p>
    <input type="text" id="js-input" placeholder="输入消息发送到 Qt"/>
    <button id="send-btn">发送到 Qt</button>

    <script>
        // 初始化 QWebChannel
        new QWebChannel(qt.webChannelTransport, function(channel) {
            // 获取注册的对象
            const myObject = channel.objects.myObject;

            // 监听来自 Qt 的信号
            myObject.sendMessageToJS.connect(function(message) {
                document.getElementById('qt-message').innerText = message;
            });

            // 访问和修改 Qt 对象的属性
            document.getElementById('qt-message').innerText = myObject.message;

            // 监听属性变化
            myObject.messageChanged.connect(function(newMessage) {
                document.getElementById('qt-message').innerText = newMessage;
            });

            // 发送消息到 Qt
            document.getElementById('send-btn').onclick = function() {
                const msg = document.getElementById('js-input').value;
                if (msg) {
                    myObject.receiveMessageFromJS(msg);
                    document.getElementById('js-input').value = '';
                }
            };
        });
    </script>
</body>
</html>

3.2 关键点说明

qt.webChannelTransport：这是 Qt 提供的传输对象，用于在 Web 页面和 Qt 之间建立通信通道。确保在加载 HTML 页面时，QWebChannel 已经正确设置并绑定到 QWebEnginePage。
注册对象：在 Qt 端通过 webChannel->registerObject 注册的对象，在 JavaScript 中可以通过 channel.objects.<对象名> 访问。
信号与槽：
- 在 Qt 端定义的信号（如 sendMessageToJS）可以在 JavaScript 中通过 .connect 方法连接回调函数。
- 在 JavaScript 中调用 Qt 对象的方法（如 receiveMessageFromJS）可以触发 Qt 端的槽函数。

4. 消息传递与序列化

QWebChannel 的通信基于 消息传递机制，消息以 JSON 格式 进行序列化和反序列化。这种设计确保了数据在 C++ 和 JavaScript 之间的高效传输和兼容性。

4.1 消息格式

典型的 QWebChannel 消息包含以下几个部分：

类型（Type）：标识消息的类型，如方法调用、信号发送、属性更新等。
对象名称（ObjectName）：目标 Qt 对象的名称。
方法名称（Method）：调用的方法或信号名称。
参数（Arguments）：传递给方法或信号的参数列表。

示例消息

调用方法：

{
    "type": 1,
    "objectId": "myObject",
    "method": "receiveMessageFromJS",
    "arguments": ["Hello from JavaScript"]
}

属性变化通知：

{
    "type": 3,
    "objectId": "myObject",
    "signal": "messageChanged",
    "arguments": ["新的消息内容"]
}

4.2 序列化与反序列化

Qt 端：QWebChannel 使用内部的序列化机制，将 C++ 对象的方法调用和信号转换为 JSON 消息，通过传输层发送给 Web 端。
Web 端：qwebchannel.js 解析来自 Qt 的 JSON 消息，并调用相应的 JavaScript 回调函数或更新前端状态。

5. 信号与槽机制的支持

Qt 的 信号与槽（Signals and Slots） 是其核心特性之一，QWebChannel 利用这一机制实现了 Qt 和 Web 端之间的双向通信。

5.1 信号发送到 JavaScript

当 Qt 对象发出一个信号时，QWebChannel 会将这个信号序列化为 JSON 消息，并通过传输层发送给 Web 端。Web 端的 qwebchannel.js 接收到消息后，调用预先连接的回调函数，实现信号的接收和处理。

示例

Qt 端：

emit myObject->sendMessageToJS("Hello from Qt!");

Web 端：

myObject.sendMessageToJS.connect(function(message) {
    console.log("收到来自 Qt 的消息：" + message);
});

5.2 JavaScript 调用 Qt 方法

JavaScript 可以通过 QWebChannel 暴露的接口调用 Qt 对象的方法。当 JavaScript 调用一个方法时，qwebchannel.js 将这个调用序列化为 JSON 消息，发送给 Qt 端。Qt 端的 QWebChannel 接收到消息后，找到对应的方法并执行，然后将结果（如果有）返回给 Web 端。

示例

JavaScript 端：

myObject.receiveMessageFromJS("Hello from JavaScript");

Qt 端：

void MyObject::receiveMessageFromJS(const QString &msg) {
    qDebug() << "Received from JS:" << msg;
    emit sendMessageToJS("Hello from Qt after receiving your message!");
}

6. 整体工作流程

为了更清晰地理解 QWebChannel 的原理，下面描述一次完整的通信流程：

6.1 初始化阶段

Qt 端：
- 创建 QWebChannel 实例。
- 使用 registerObject 方法将需要暴露给 Web 的 Qt 对象注册到 QWebChannel。
- 设置 QWebEnginePage 的 WebChannel 传输层（qt.webChannelTransport）。
- 加载包含 qwebchannel.js 的 Web 页面。
Web 端：
- 在 HTML 页面中引入 qwebchannel.js。
- 初始化 QWebChannel，传入 qt.webChannelTransport 作为传输对象。
- 在回调函数中获取注册的 Qt 对象，并设置信号连接和方法调用。

6.2 运行时通信

Qt 到 Web 的通信：
- Qt 对象的方法被调用或信号被发出。
- QWebChannel 将这些动作序列化为 JSON 消息，通过传输层发送给 Web 端。
- Web 端的 qwebchannel.js 接收到消息后，执行相应的回调函数或更新前端状态。
Web 到 Qt 的通信：
- JavaScript 调用 Qt 对象的方法，通过 qwebchannel.js 将调用序列化为 JSON 消息，发送给 Qt 端。
- Qt 端的 QWebChannel 接收到消息后，找到对应的方法并执行，可能触发信号或返回结果。
- 如果有信号需要发送回 Web 端，Qt 端将信号序列化并通过传输层发送，Web 端接收并处理。

6.3 示例流程

Qt 端 注册了一个 MyObject 对象，包含 message 属性和 sendMessageToJS 信号。
Web 端 页面加载后，初始化 QWebChannel 并获取 myObject。
Web 端 调用 myObject.receiveMessageFromJS("Hello from JS")。
Qt 端 接收到调用，执行 receiveMessageFromJS 方法，打印消息并发出 sendMessageToJS("Hello from Qt!") 信号。
Web 端 接收到 sendMessageToJS 信号，更新页面上的消息显示。

7. QWebChannel 的优势与局限

7.1 优势

双向通信：支持 Qt 和 Web 之间的双向数据交换和方法调用。
基于现有机制：利用 Qt 的信号与槽机制，简化了通信逻辑。
易于集成：通过 QWebChannel 和 qwebchannel.js，可以快速实现集成，无需复杂的协议设计。
跨平台：作为 Qt 的一部分，QWebChannel 支持多种操作系统和平台。

7.2 局限

依赖 Qt WebEngine：需要使用 QWebEngineView 或类似组件，增加了应用体积。
性能开销：消息的序列化和反序列化可能带来一定的性能开销，特别是在高频通信场景下。
复杂性：对于复杂的通信需求，可能需要额外的设计和优化，如批量处理消息、错误处理等。
浏览器兼容性：依赖于 Chromium 内核的 qwebchannel.js，在非 Chromium 浏览器上可能无法使用。

8. QWebChannel 的内部实现细节

为了更深入地理解 QWebChannel 的原理，下面探讨其内部实现的一些关键点：

8.1 序列化与反序列化机制

QWebChannel 使用 JSON 作为消息的序列化格式，这是因为 JSON 具有以下优点：

跨语言支持：C++ 和 JavaScript 都内置了对 JSON 的支持，便于序列化和反序列化。
轻量级：JSON 格式简洁，传输效率高。
易于解析：JSON 数据结构清晰，易于解析和处理。

序列化过程

当 Qt 对象的方法被调用或信号被发出时，QWebChannel 会将这些动作转换为 JSON 消息。例如：

方法调用：

对象名称：myObject
方法名称：receiveMessageFromJS
参数：["Hello from JS"]

转换为 JSON：

{
    "type": 1,
    "objectId": "myObject",
    "method": "receiveMessageFromJS",
    "arguments": ["Hello from JS"]
}

信号发送：

对象名称：myObject
信号名称：sendMessageToJS
参数：["Hello from Qt!"]

转换为 JSON：

{
    "type": 3,
    "objectId": "myObject",
    "signal": "sendMessageToJS",
    "arguments": ["Hello from Qt!"]
}

反序列化过程

Web 端的 qwebchannel.js 接收到 JSON 消息后，根据消息类型调用相应的回调函数：

方法调用：找到对应的 JavaScript 方法并执行。
信号接收：触发预先连接的信号处理函数。

8.2 消息传输机制

QWebChannel 依赖于 Qt 的 传输层（QWebChannelAbstractTransport）来实现消息的发送和接收。具体实现通常基于 WebSocket 或类似的实时通信协议。

WebSocket 传输实现

Qt 提供了 QWebChannelWebSocketTransport（内部实现），负责处理 WebSocket 连接和消息的收发。

发送消息：将序列化后的 JSON 消息通过 WebSocket 发送给 Web 端。
接收消息：监听 WebSocket 的消息事件，将接收到的 JSON 消息传递给 QWebChannel 进行处理。

8.3 对象注册与管理

当 Qt 对象被注册到 QWebChannel 时，QWebChannel 会维护一个对象映射表，记录所有已注册的对象及其属性和方法。

对象映射表：一个内部的数据结构（如 QHash<QString, QObject*>），用于存储对象名称与对象的对应关系。
元对象系统：利用 Qt 的元对象系统（Meta-Object System），动态获取对象的属性、方法和信号信息，以便在通信时进行正确的调用和序列化。

8.4 信号与槽的桥接

QWebChannel 利用 Qt 的 信号与槽机制 实现了跨语言的信号传递：

信号发送：当 Qt 对象发出信号时，QWebChannel 捕获该信号，将其序列化为 JSON 消息，并通过传输层发送给 Web 端。
信号接收：Web 端通过 qwebchannel.js 接收到信号消息后，调用预先绑定的 JavaScript 回调函数，模拟信号的接收和处理。

8.5 异步处理与线程安全

由于 Qt 应用程序可能是多线程的，

posted on 2025-04-14 20:57 joken1310 阅读(504) 评论(0) 收藏举报

刷新页面返回顶部

joken-前端工程师

1. 环境准备

2. Qt 端实现

2.1 创建一个 Qt 对象供 JavaScript 调用

2.2 设置 QWebChannel 并注册对象

2.3 配置 Qt WebChannel 的 JavaScript 库

3. Web 端实现

3.1 引入 qwebchannel.js

3.2 关键点说明

4. 运行示例

5. 注意事项

6. 扩展应用

QWebChannel通信原理

1. 通信机制的基础

底层传输协议

2. Qt 端的实现

2.1 QWebChannel 类

2.2 QWebChannelAbstractTransport 类

2.3 QObject 的暴露机制

示例代码

2.4 注册对象到 WebChannel

3. Web 端的实现

3.1 引入 qwebchannel.js

3.2 关键点说明

4. 消息传递与序列化

4.1 消息格式

示例消息

4.2 序列化与反序列化

5. 信号与槽机制的支持

5.1 信号发送到 JavaScript

示例

5.2 JavaScript 调用 Qt 方法

示例

6. 整体工作流程

6.1 初始化阶段

6.2 运行时通信

6.3 示例流程

7. QWebChannel 的优势与局限

7.1 优势

7.2 局限

8. QWebChannel 的内部实现细节

8.1 序列化与反序列化机制

序列化过程

反序列化过程

8.2 消息传输机制

WebSocket 传输实现

8.3 对象注册与管理

8.4 信号与槽的桥接

8.5 异步处理与线程安全