QWebChannel示例学习,Qt与网页交互

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gongjianbo1992/article/details/89707251

0.简述

QWebSocket配合QWebChannel,可以将QObject暴露给HTML客户端。如Qt文档所述,通过将QObject派生对象发布到QWebChannel并在HTML端使用qwebchannel.js,可以透明的访问QObject的属性和public槽/方法。不需要手动消息传递和数据序列化,C++端的属性更新和信号发射会自动传输到可能远程运行的HTML客户端。在客户端,将为任何已发布的C++QObject创建JavaScript对象。它反映了C++对象的API,因此直观易用。

在QtCreator中搜索webchannel的示例,找到standalone,先构建运行下(我这可能环境没配置好,qwebchannel.js需要手动复制到html的同级目录下)。运行起来后,可以看到示例实现了桌面对话框与网页对话框的交互功能。

1.应用

通过修改示例,可以很简单的将该功能应用的自己的项目中。

1.拷贝示例中shared目录的两个C++类文件:

主要是借助Qt的QWebChannelAbstractTransport和QWebSocketServer两个类来实现这个功能。每当网页端WebSocket来连接这个Server时,就构造一个Transport,并传递给Chnnel的connectTo槽

2.定义一个QObject的派生类用于收发数据

示例中定义了一个简单的Dialog,定义了一个sendText的信号用于C++发送信号给HTML,定义了一个receiveText的槽函数用于HTML端调用传递数据给C++。

通过调用Channel的registerObject函数注册后,网页端可以关联这个对象。

//C++文件

//HTML的js

3.网页端构造Channel对象

示例中构造了一个WebSocket来连接C++的WebSocketServer,然后利用QWebChannel访问Dialog,关联信号以及调用槽函数。

这样,Qt C++就能与网页进行交互了。 

2.参考

文档:file:///D:/Qt/Qt5.7.1_vs2015/Docs/Qt-5.7/qtwebchannel/qwebchannel.html

博客:https://www.cnblogs.com/wkcagd/p/7732330.html

3.代码

github:https://github.com/gongjianbo/QtWebCannelAndMap.git

本来是在学习Qt用webgine操作高德地图,正好需要交互。

猜你喜欢

转载自blog.csdn.net/gongjianbo1992/article/details/89707251