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()<<QString("string from WebPage:%1").arg(strTemp);

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安装目录下可以找到(直接在安装目录下检索就好了),详细看每句的注释

<!doctype html>

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

相关推荐
励志要当大牛的小白菜29 分钟前
ART配对软件使用
开发语言·c++·qt·算法
爱装代码的小瓶子3 小时前
数据结构之队列(C语言)
c语言·开发语言·数据结构
Maybe_ch4 小时前
.NET-键控服务依赖注入
开发语言·c#·.net
超浪的晨4 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
终焉暴龙王4 小时前
CTFHub web进阶 php Bypass disable_function通关攻略
开发语言·安全·web安全·php
Edingbrugh.南空5 小时前
Aerospike与Redis深度对比:从架构到性能的全方位解析
java·开发语言·spring
CodeCraft Studio6 小时前
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
开发语言·python·html·markdown·aspose·html转markdown·asposel.html
QQ_4376643146 小时前
C++11 右值引用 Lambda 表达式
java·开发语言·c++
aramae6 小时前
大话数据结构之<队列>
c语言·开发语言·数据结构·算法
封奚泽优6 小时前
使用Python实现单词记忆软件
开发语言·python·random·qpushbutton·qtwidgets·qtcore·qtgui