Qt QWebEngine应用和网页的交互

一、QWebEngine简介
1、Qt WebEngine模块提供了一个Web浏览器引擎，可以轻松地将万维网上的内容嵌入到没有本机Web引擎的平台上的Qt应用程序中。

2、Qt WebEngine提供了用于渲染HTML，XHTML和SVG文档的C ++类和QML类型，它们使用级联样式表（CSS）进行样式设置并使用JavaScript编写脚本。 用户可以通过使用HTML元素上的contenteditable属性，使HTML文档完全可编辑

3、引擎架构

4、QT WebEngine小部件模块

5、示例

int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QWebEngineView view ;
view.load(QUrl(“http://www.baidu.com/”));
view.show();
return a.exec();
}
二、QWebEngine应用和网页的交互
1、QT侧实现原理
实现一个继承于QObject的通信类，注意，要继承于QObject,因为需要用到信号槽，这个类的主要作用是实现本地应用与网页端通信的方法，无论本地应用还是网页端都是直接调用这个通讯类的方法来实现两者之间的通讯的。例如下面例子中的QWebChannelClass类。重点：本地应用与网页端之间的通讯过程，是通过信号和槽函数实现的，本地应用通过发送信号达到把信息发送到网页端，而网页端通过直接调用槽函数实现把信息传到本地应用。很简单，就是本地应用通过发送通讯类的信号通知网页端，网页端通过直接调用通讯类的槽函数来通知本地应用。网页端对本地应用的操作一定要调用槽函数，写在public slots 限定符下面的槽函数，不能是普通的public函数。

2、QT侧实现
qwebchannelclass.h

#ifndef QWEBCHANNELCLASS_H
#define QWEBCHANNELCLASS_H
#include
class QWebChannelClass : public QObject
{
Q_OBJECT
public:
explicit QWebChannelClass(QObject *parent = nullptr);
signals:
void fromLocalToWebPage(const QString& strTemp); //信号，发送这个信号就会把信息发送到网页端
public slots:
void fromWebPageToLocal(const QString& strTemp); //槽函数，网页端将通过这个函数把信息传回本地应用。
};
#endif // QWEBCHANNELCLASS_H
qwebchannelclass.cpp

#include “qwebchannelclass.h”
#include
QWebChannelClass::QWebChannelClass(QObject *parent) : QObject(parent)
{

}
void QWebChannelClass::fromWebPageToLocal(const QString& strTemp)
{
qDebug()< emit fromLocalToWebPage(“fromLocalToWebPage”); //为了简单，当网页端调用槽函数时，直接在这里发送一个信号回网页端
}

2.2 注册通讯类，创建一个QWebChannel类对象，然后将步骤一中实现的通信类对象通过void QWebChannel::registerObject(const QString &id, QObject *object)注册到QWebChannel对象中，其中参数一是一个字符串，这个很重要，这个id将作为一个标识符参与网页端QWebChannel对象的创建，网页端通过这个id创建的对象将可以直接访问通信类的方法实现通信，注册好后将这个QWebChannel对象设置到即将加载我们指定网页的QWebEnginePage中，下面看代码：

m_pWebEngineView = new QWebEngineView(this);
QWebChannel *pChannel=new QWebChannel(this); //创建一个Qwebchannel对象
pChannel->registerObject(QStringLiteral(“channelObject”),m_pWebChannelClass); //注册通信类对像
m_pWebEngineView->page()->setWebChannel(pChannel);//将QWebChannel 对象设置到网页载体QWebEnginePage中
3、H5侧实现
3.1 导入qwebchannel.js文件

qwebchannel.js

3.2 创建网页端通信对象，qwebchannel.js在Qt安装目录下可以找到（直接在安装目录下检索就好了），详细看每句的注释

3.3.1 加载主播中心的Url的时候，设置了两个header 分别是：“x-auth-token"和"uid”

3.3.2 跳转函数参数为json，json格式待定

三、参考文档
1、https://doc.qt.io/qt-5/qtwebengine-overview.html#qt-webengine-module

2、https://blog.csdn.net/Y_Bingo/article/details/82954940