Qt QWebChannel web端js与C++交互

已于 2023-07-09 16:22:43 修改
阅读量2w 收藏 51
点赞数 19
分类专栏： Qt 文章标签： qt QWebChannel javascript
于 2022-01-24 14:06:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jay_Xio/article/details/122662697
版权

文章目录

1. QWebChannel

QWebChannel类的作用是向远端HTML客户端暴露 QObject。

QWebChannel填补了C++应用程序和HTML/JavaScript 应用程序之间的空白。通过将QObject派生对象发布到QWebChannel并在HTML中引入qwebchannel.js脚本可从此处获取。在HTML端，可以透明地访问QObject的属性、公共槽和方法。不需要手动消息传递和数据序列化，C++方面的属性更新和信号发射将自动传输到可能远程运行的HTML客户机。在客户端，将为任何发布的C++ QObject创建JavaScript对象。它反映了C++对象的API，因此可以直观地使用。
在这里插入图片描述
但是，Web端与C++之间怎么进行通信能？ 有两个方法：

  • QWebEngine 提供一个 web 引擎，用于在 Qt 应用中嵌入任意的网页内容。Qt WebEngine 是基于 Chromium 项目实现的，提供了一个 js 的宿主环境，内部实现了js调用C++的环境；
  • Websocket C++端建立websocket server，Web端连接，qwebchannel.js会获取到C++端所有的属性、槽函数等。

2. 使用QWebEngine的示例

2.1 C++端代码

2.1.1 mainwindow.cpp

// 要导出的类，此类供js调用
m_myTestClass = new MyTestClass(this);

// 创建QWebChannel，把创建的类注册到QWebChannel中，js才能调用此类的方法
m_webChannel = new QWebChannel(this);
m_webChannel->registerObject("mytestclass", m_myTestClass);

// js与C++通信方式一、使用QWebEngineView加载网页，web端js与C++之间的通信
QString strHtml = QApplication::applicationDirPath() + "/../../testWeb/test.html";
// QWebEngineView 基于 Chromium 的 web 引擎
m_webEngineView = new QWebEngineView(this);
m_webEngineView->load(QUrl::fromLocalFile(strHtml));
m_webEngineView->page()->setWebChannel(m_webChannel);
ui->verticalLayout->addWidget(m_webEngineView);

导出类 MyTestClass，供js调用

2.1.2 mytestclass.h

#ifndef MYTESTCLASS_H
#define MYTESTCLASS_H

#include <QObject>
#include <QThread>

class MyTestClass : public QObject
{
    Q_OBJECT

    // 导出的属性
    Q_PROPERTY(QString navStatus MEMBER m_navStatus NOTIFY navStatusChanged)

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

signals:
    // 导出的事件
    void navStatusChanged(const QString& navStatus);

public slots:
    // 导出的槽函数
    void function1(const QString& str);


private:
    void setNavStatus(const QString& status);

    QString m_navStatus;

};

#endif // MYTESTCLASS_H

2.1.3 mytestclass.cpp

#include "mytestclass.h"

#include <QMessageBox>
#include <QVariant>
#include <QDebug>

MyTestClass::MyTestClass(QObject *parent) : QObject(parent),
    m_navStatus("hello")
{
}

void MyTestClass::function1(const QString& str)
{
    setNavStatus(str);
    qDebug() << __FUNCTION__ << str;
}

void MyTestClass::setNavStatus(const QString &status)
{
    m_navStatus = status;
    emit navStatusChanged(m_navStatus);
}

2.2 Web端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="callcpp" onclick="callcpp()">callcpp</button>
    <button onclick="getValue()">getValue</button>

    <script src="qwebchannel.js"></script>

    <script type="text/javascript">
        var webObj;

        // 创建Webchannel，与C++端建立连接
        new QWebChannel(qt.webChannelTransport, function (channel) {

                // 获取类的对象
                webObj = channel.objects.mytestclass;

                // 类的事件
                webObj.navStatusChanged.connect(function(arg){
                    alert("navStatusChanged: " + arg);
                });
            });

        function callcpp(){

            // 类的方法
            webObj.function1('this is a test');
        }

        function getValue(){

            // 类的属性值
            var status = webObj.navStatus;

            alert(status);
        }

        
    </script>
</body>
</html>

其中，qwebchannel.js 取自 Qt安装目录的 Qt5.12.0\Examples\Qt-5.12.0\webchannel\shared 目录。

2.3 运行

在这里插入图片描述
QT UI加载了html页面，显示了其中的元素。

（1）Web端的getValue获取C++对象的属性navStatus，属性初始值为 “hello”
           在这里插入图片描述
（2）Web端的 callcpp 调用 C++端的函数 function1，C++端function1函数中打出
           在这里插入图片描述
（3）Web端响应 navStatusChanged 事件

           在这里插入图片描述

3. 使用WebSocket的示例

3.1 C++端代码

3.1.1 mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 要导出的类，此类供js调用
    m_myTestClass = new MyTestClass(this);

    // 创建QWebChannel，把创建的类注册到QWebChannel中，js才能调用此类的方法
    m_webChannel = new QWebChannel(this);
    m_webChannel->registerObject("mytestclass", m_myTestClass);

    // js与C++通信方式二、创建QWebsocketServer，web端与之建立连接
    startServer();

}

MainWindow::~MainWindow()
{
    delete ui;
}

// 建立WebSocket服务
void MainWindow::startServer()
{
    m_websocketServer = new QWebSocketServer("testWebchannel", QWebSocketServer::NonSecureMode, this);

    if(!m_websocketServer->listen(QHostAddress::Any, 12345))
    {
        qDebug() << "websocket server listen failed, error: " << m_websocketServer->errorString();
        return;
    }

    connect(m_websocketServer, &QWebSocketServer::newConnection, this, &MainWindow::onNewConnection);
    qDebug() << "startServer";
}

void MainWindow::onNewConnection()
{
    QWebSocket* client = m_websocketServer->nextPendingConnection();
    qDebug() << (QString("A new connection from %1.%2").arg(client->peerAddress().toString()).arg(client->localPort()));

    auto pTransport = new WebSocketTransport(client);
    // 可以不需要，这里只是为了调试打印js端的qwebchannel.js是怎么和C++端通信的，通信协议是什么样的
    connect(pTransport, &WebSocketTransport::messageReceived, this, &MainWindow::onTransportMessageReceived);

    m_webChannel->connectTo(pTransport);
}

void MainWindow::onTransportMessageReceived(const QJsonObject &message, QWebChannelAbstractTransport *transport)
{
    qDebug() << "onTransportMessageReceived: " << message;
}

导出类 MyTestClass，供js调用。
代码中 WebSocketTransport 类代码，取自 Qt安装目录的 Qt5.12.0\Examples\Qt-5.12.0\webchannel\shared 目录下的 websockettransport.h websockettransport.cpp。
此处省略。

3.2 Web端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="callcpp" onclick="callcpp()">callcpp</button>
    <button onclick="getValue()">getValue</button>

    <script src="qwebchannel.js"></script>

    <script type="text/javascript">
        var webObj;

        // 连接c++端的 Websocket
		var socket = new WebSocket('ws://127.0.0.1:12345');

        // 连接成功后
        socket.onopen = function(){
            alert("onopen");

            // 创建Webchannel
            new QWebChannel(socket, function (channel) {

                // 获取类的对象
                webObj = channel.objects.mytestclass;

                // 类的事件
                webObj.navStatusChanged.connect(function(arg){
                    alert("navStatusChanged: " + arg);
                });
            });
        }

        function callcpp(){
            // 类的方法
            webObj.function1('this is a test');
        }

        function getValue(){
            // 类的属性值
            var status = webObj.navStatus;

            alert(status);
        }

        

    </script>
</body>
</html>

在这里插入图片描述

与2.2中的Web端代码相比，此时，需要先创建WebSocket连接，把socket传入QWebChannel中。

3.3 运行

（1）运行C++， C++代码没有加载html， 此时为空界面；
（2）使用Chrome浏览器，或者Edge浏览器打开Web测试网页，一打开就与C++端的websocket连接上了
           在这里插入图片描述
（3）接下来与2.3的演示一样。

3.4 问题

我这里端口用的12345，可能在有些电脑上此端口被占用了，会报错：
在这里插入图片描述
在这里插入图片描述

改一下端口号就好了， 比如我改成：
在这里插入图片描述


4. 代码

所有代码详见：QWebChannel

J_Xio
关注
  • 19
    点赞
  • 踩
  • 51
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
基于Qt使用QWebChannel实现C++与网页JavaScript交互
08-08
基于Qt5.6.3+Vs2013环境下，通过查阅资料使用QWebChannel实现C++与网页JavaScript交互，代码简洁明了，且关键位置都有注释，下载后在正确的环境下即可运行，适合初学者参考使用。
QT通过QWebChannel模块实现与HTML通信（web端），获取高德地图中某个点位的经纬度坐标。
最新发布
xiaoluo2333的博客
05-09 992
本篇根据上一篇所实现的内容基础上，使用QT中的webchannel方法实现与HTML交互，在HTML中使用了Javascript代码实现。实现鼠标左键点击某个位置即可获得该地点的经纬度坐标。
QT内嵌浏览器与JS通讯
weixin_41111116的博客
09-01 1982
QT内嵌浏览器与JS通讯
Qt QWebSocket实现JS调用C++
北极星的技术笔记
11-15 1077
本篇主要介绍实现JS调用C++的另一种方式，即QWebSocket+QWebChannel。与之前的一篇文章QWebEngine 加载网页及交互，实现C++与JS 相互调用中提到的仅通过QWebChannel 实现JS调C++相比，本文介绍的这种方式，更灵活，能实现更加复杂的业务功能。以上就是本文要讲的内容了，本文详细介绍了QWebChannel与网页端通信的两种方式，希望通过阅读本文，能帮你快速掌握在Qt 前后端混合开发模式下C++与JS通信的方法。对文中内容有任何疑问，都可以留言讨论！
Qt-Web混合开发-QtWebChannel实现Qt与Web通信交互（4）
mahuifa的博客
12-14 3875
1、构建后将html、css、js文件自动拷贝到可执行程序路径下； 2、使用QtWebChannel实现web界面和qt界面实现双向通信。
qwebchannel 多个方法报js: Uncaught TypeError: channel.execCallbacks[message.id] is not a function
wyj372的专栏
05-03 1005
c++ qwebchannel js: Uncaught TypeError: channel.execCallbacks[message.id] is not a function
c++/qt通过QWebChannel与JS/html网页端交互通信
weixin_45074487的博客
03-28 969
1、需要从网上下载两个文件2、QWebChannel注册通信通信类对象名:“MyWebTransPort”，js调用这个名进行通信;3、js发送数据至c++调用函数：void RecvTextFromJs(const QString &text);c++发送数据至js调用函数：void SignalSendToJs(QString text);4、js/html网页作为客户端，c++/qt启动本地服务器作为服务端进行通信；**
QT应用程序与web页面通信
10-28
QT应用程序与Web页面通信是一个重要的跨平台开发技术，它允许原生桌面应用（如QT编写的应用）与基于Web的用户界面进行交互。这种技术在现代软件设计中非常常见，因为混合应用可以结合本地功能和Web的灵活性。以下将...
QWebChannel Qt js c++ 互相调用 demo
01-14
**QWebChannel：Qt、JavaScript与C++的通信桥梁** 在现代软件开发中，前端界面与后端逻辑的交互越来越重要。Qt库提供了一个强大的工具——QWebChannel，它允许Qt应用程序与JavaScript（在Web浏览器或者QWebKit或Qt ...
QT（C++）与Web的JS相互调用实用例子
11-03
在Web页面中，你需要引入`qwebchannel.js`脚本，这是QT提供的用于JavaScript与C++交互的库。然后，可以创建一个新的WebChannel实例，连接到C++提供的服务器，并注册代理对象： ```javascript new QWebChannel(qt....
Qwebchannel.js资源文件下载
08-22
适用于QT界面的浏览器控件，QWebEngineView控件进行交互数据的js文件，免费使用。
基于Qt WebChannel实现QT与HTML页面通信
01-13
最近，C++和WEB本地混合应用开发模式逐渐流行起来，个人也认为标记语言描述的界面是界面开发的一个发展趋势。WPF、Java FX，当然也少不了Html。基于Html的界面在开发效率，可移植性上都十分有优势，所以也被很多程序采用 随着HTML5技术风生水起，Qt开发团队用近一年的时间开发了一个全新的基于Chromium的浏览器引擎Qt WebEngine，以支持面向未来的Hybrid应用开发，并完全支持桌面和嵌入式平台。 本例实现基于Qt WebChannel 的QT与HTML页面通信
qwebchannel.js
10-25
qt qwebview 与界面交互 用到的 文件qwebchannel.js。用时将此文件夹引入到html文件即可。
Qt通过QWebChannel和html交互源代码
06-06
Qt框架提供了一种强大的方式来实现这种交互，即通过QWebChannel，它允许Qt对象与JavaScript在Web浏览器环境中进行双向通信。本教程将深入讲解如何在QT5.12环境下，利用Visual Studio 2017进行QWebChannel的配置和...
QT5.9 利用 QWebEngineView / QWebChannel 调用JS程序实现QT与HTML网页数据交互，加载百度地图并与地图交互数据
03-04
QT5.9 利用 QWebEngineView / QWebChannel 调用JavaScript 实现QT与HTML网页数据交互， 实现QT加载百度地图并与地图交互数据 。 实现功能： 1.QT通过QWebEngineView模块加载百度地图，通过QWebChannel 调用JS函数...
Qt - QWebChannel实现网页与C++程序双向通信
qq_28809149的博客
05-18 2518
这里实现的内容，在Qt里嵌入一个Html网页。这里使用了QWebEngineView来实现。 然后要让网页和C++怎么交互呢？ 这里需要几个关键的类 QWebChannel 然后就是一个继承自QObject的类 #include <QDebug> #include <QMessageBox> class Test: public QObject { Q_OBJECT public: Test(QObject *parent = nullptr); ~Test(); sig
QT5.9 利用 QWebEngineView / QWebChannel 调用JavaScript 实现QT与HTML网页数据交互， 实现QT加载百度地图并与地图交互数据
热门推荐
qq_43569273的博客
03-04 1万+
QT5.9 利用 QWebEngineView / QWebChannel 调用JavaScript 实现QT与HTML网页数据交互， 实现QT加载百度地图并与地图交互数据 编译环境 QT5.9.3 + VS2015 64/32bit +win10 （MinGW默认不支持 QWebEngineView） 先看软件截图： 实现功能： 1.QT通过QWebEngineView模块加载百度地...
QT中基于QWebEngineView的C++和JS互相调用
小西2016的博客
05-24 3111
QT版本5.14.2，ubuntu18.04.4 1、.PRO包含库 QT +=webenginewidgets 2、main中启用OpenGL QCoreApplication::setAttribute(Qt::AA_UseOpenGLES); QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts); 3、加载本地网页 //.h #include <QtWebEngineWidgets> #include &lt.
Qt和JavaScript使用QWebChannel交互
03-28
QWebChannel是一种用于Qt应用程序和嵌入式Web页面之间进行互操作的通信机制。它允许Qt应用程序向Web页面暴露对象，并允许Web页面访问这些对象的属性和方法。同时，也允许Web页面向Qt应用程序发送消息和调用Qt应用程序的函数。 使用QWebChannel进行Qt和JavaScript之间的交互，需要遵循以下步骤： 1. 在Qt应用程序中创建一个QWebChannel对象，并将其绑定到一个QWebEngineView或QWebEnginePage对象上。 2. 在Qt应用程序中创建一个QObject的子类，该子类将作为Qt对象被暴露给Web页面。 3. 在Qt应用程序中将QObject对象注册到QWebChannel对象中。 4. 将QWebChannel对象传递给Web页面，通过JavaScript代码将其绑定到Web页面中的window对象上。 5. 在JavaScript代码中可以通过window对象访问到Qt应用程序中注册的QObject对象，调用其属性和方法。 6. 在Qt应用程序中可以通过QWebChannel对象接收Web页面发送的消息，以及调用Web页面中的JavaScript函数。 下面是一个简单的例子，演示了如何使用QWebChannel进行Qt和JavaScript之间的交互： Qt代码： ```c++ // 创建一个QObject的子类，作为Qt对象被暴露给Web页面 class MyObject : public QObject { Q_OBJECT public: MyObject(QObject *parent = nullptr) : QObject(parent) {} public slots: void showMessage(const QString &message) { qDebug() << "Received message from web page:" << message; } }; int main(int argc, char *argv[]) { QApplication app(argc, argv); // 创建一个QWebChannel对象，并将其绑定到一个QWebEngineView对象上 QWebEngineView view; QWebChannel channel; view.page()->setWebChannel(&channel); // 创建MyObject对象，并将其注册到QWebChannel对象中 MyObject obj; channel.registerObject("myObject", &obj); // 加载Web页面 view.load(QUrl("qrc:/index.html")); view.show(); return app.exec(); } ``` JavaScript代码： ```javascript // 将QWebChannel对象绑定到window对象上 new QWebChannel(qt.webChannelTransport, function(channel) { window.myObject = channel.objects.myObject; }); // 调用MyObject对象的showMessage函数 myObject.showMessage("Hello from web page!"); ``` 在上面的例子中，我们创建了一个名为MyObject的QObject子类，并将其注册到了QWebChannel对象中。在JavaScript代码中，我们通过调用QWebChannel构造函数，将QWebChannel对象绑定到window对象上，并通过window对象访问了MyObject对象的showMessage函数。当Web页面调用showMessage函数时，它将向Qt应用程序发送一个消息，Qt应用程序将通过QWebChannel对象接收到该消息，并调用MyObject对象的showMessage函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值