自学内容网 自学内容网

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

使用 Qt WebChannel

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

步骤:
  1. 安装 Qt WebChannel 模块:确保你的项目中包含了 QtWebChannel 模块。

  2. 设置 C++ 后端

    • 创建一个继承自 QObject 的类,并注册为可以被 WebChannel 访问的对象。
    • 将该对象注册到 QWebChannel
  3. 设置前端

    • 在 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>


原文地址:https://blog.csdn.net/m0_45674856/article/details/143329434

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!