当前位置：首页 > article >正文

网页端.js和qt C++ 文件怎么进行数据传递

article 2025/1/20 15:53:16

使用 Qt WebChannel

Qt WebChannel 是一个用于在 QML 和 HTML/JavaScript 之间进行双向通信的库。它允许你在 C++ 中定义的对象被 JavaScript 直接访问，并且支持属性绑定、信号和槽机制。

步骤：

安装 Qt WebChannel 模块：确保你的项目中包含了 QtWebChannel 模块。
设置 C++ 后端：
- 创建一个继承自 QObject 的类，并注册为可以被 WebChannel 访问的对象。
- 将该对象注册到 QWebChannel。
设置前端：
- 在 HTML 文件中引入 qwebchannel.js。
- 创建一个 QWebChannel 对象，并连接到后端提供的 QWebChannel 实例。
- 通过 QWebChannel 对象访问 C++ 对象的方法和属性。

示例代码

C++ 代码

#include <QCoreApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QWebChannel>
#include <QWebEngineView>

class MyObject : public QObject
{
    Q_OBJECT
public:
    Q_INVOKABLE void sayHello(const QString &name) {
        qDebug() << "Hello, " << name;
    }
};

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

    QQmlApplicationEngine engine;
    QWebChannel *channel = new QWebChannel(&engine);
    MyObject myObject;
    channel->registerObject(QStringLiteral("myObject"), &myObject);

    QWebEngineView view;
    view.page()->setWebChannel(channel);
    view.setUrl(QUrl("qrc:/index.html"));
    view.show();

    return app.exec();
}

#include "main.moc"

HTML + JavaScript 代码 (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Qt WebChannel Example</title>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <script>
        var myObject;
        new QWebChannel(qt.webChannelTransport, function (channel) {
            // 获取 C++ 对象
            myObject = channel.objects.myObject;

            // 调用 C++ 方法
            myObject.sayHello("World");
        });
    </script>
</head>
<body>
    <h1>Qt WebChannel Example</h1>
</body>
</html>

查看全文

http://www.kler.cn/a/370514.html