qt H5 与 Native 交互

最新推荐文章于 2024-01-31 14:36:22 发布
最新推荐文章于 2024-01-31 14:36:22 发布
阅读量2.5k 收藏 5
点赞数
分类专栏： QT

1.  前言

最近，C++和WEB本地混合应用开发模式逐渐流行起来，个人也认为标记语言描述的界面是界面开发的一个发展趋势。WPF、Java FX，当然也少不了Html。基于Html的界面在开发效率，可移植性上都十分有优势，所以也被很多程序采用

随着HTML5技术风生水起，Qt开发团队用近一年的时间开发了一个全新的基于Chromium的浏览器引擎Qt WebEngine，以支持面向未来的Hybrid应用开发，并完全支持桌面和嵌入式平台。此外，Qt WebEngine不仅提供了易于使用的跨平台API，还完全集成了Qt的图形库，允许网页内容进行叠加，并与Qt用户界面或OpenGL图形效果混合。Qt 5.4仍然包含老旧的Qt WebKit模块，但在其后发布的版本中将停止对于WebKit的支持，对此，Qt团队建议开发者将项目统一从WebKit迁移至Qt WebEngine，而对于需要Web能力的新项目，最好直接采用Qt WebEngine开发。在现在下载的QT5.6 beta预编译版本中已经没有了Qt WebKit模块。

目前QT官方的文档中对如何从原来的WebKit迁移至QtWebEngine没有提供足够丰富的文档和指导。

本文记录一些从WebKit迁移至QtWebEngine，实现C++与HTML和JS交互的一些经验和例子。

2.  使用Qt WebEngine和WebChannel模块

在官方提供的Porting from QtWebKit to QtWebEngine---https://wiki.qt.io/Porting_from_QtWebKit_to_QtWebEngine文档中给出了从WebKit迁移至QtWebEngine的一些建议和指导，其中提到QWebFrame 已经被合并到QwebEnginePage中，Qt WebEngine不能和QnetworkAccessManager交互等。

原来在Webkit中使用的交互集成的类和方法也不能使用了，原来Webkit中常用的交互方式如下：

1)    在Qt代码中加载并显示该页面

QWebView view; 

view.load(QUrl("test.html")); 

view.show();

 

官方推荐的使用方式：

 

QWebEngineView*view = newQWebEngineView(parent);

    view->load(QUrl("http://qt-project.org/"));

   view->show();

 

2)    在Qt对象中访问web页面元素

// myPlugin指向的对象可在HTML中用名字myPluginObject进行访问 

webView->page()->mainFrame()->addToJavaScriptWindowObject("myPluginObject",myPlugin); 

// 当信号signalEmitted被触发时，调用JavaScript的functionToCall函数 

webView->page()->mainFrame()->evaluateJavaScript("myPluginObject.signalEmitted.connect(functionToCall);")

 

官方推荐的使用方式：

方法一：QWebEnginePage的runJavaScript(const QString & scriptSource, FunctorOrLambdaresultCallback)

方法二：使用QtWebChannel方式，这是官方的推荐方式，他可以很方便的实现C++和HTML/JS的双向通信，同时实现C++和HTML/JS的解耦，方便开发人员的分工及系统集成，参见后面的例子。

3)    在web页面中访问Qt对象

在web页面中可以通过类似于下的JavaScript代码访问Qt对象：

<ahref="javascript:document.getElementByIdx_x("myLabel").setText("通过JavaScript访问Qt对象");"mce_href="javascript:document.getElementByIdx_x("myLabel").setText("通过JavaScript访问Qt对象");">点击访问Qt对象</a>

 

官方推荐的使用方式：

使用QtWebChannel方式，这是官方的推荐方式，他可以很方便的实现C++和HTML/JS的双向通信，同时实现C++和HTML/JS的解耦，方便开发人员的分工及系统集成，参见后面的例子。

在QT5.5和QT5.6中，利用Qt的Qt WebEngine和WebChannel模块，你完全可以进行本地桌面与web混合应用开发，你可以自由地混合JavaScript，样式表，Web内容和Qt组件。基于Chromium的 Qt WebEngine是一个非常成熟的web浏览引擎。你可以在Ｃ++ 中执行JavaScript，或者在网页中集成Ｃ++对象，并且通过JavaScript和这些对象进行交互。

一个现代的ＨＴＭＬ渲染引擎只是混合开发的一半，另一半就是本地应用和渲染对象的交互。ＱＴ的Chromium的 Qt WebEngine 集成提供了这种解决方案，当然目前还不是很完善。

从QT5.4开始就新增了Qt WebChannel模块，该模块提供了在QML/C++ 和 HTML/Javascript之间的一个简单、易用的桥接，从而使得开发能够使用Qt和Web技术进行混合开发，目前QT官方也推荐是用QtWebChannel来桥接C++和HTML，参见Qt WebChannel – bridging the gap betweenC++/QML and the web------https://www.youtube.com/watch?v=KnvnTi6XafA，这是2014年Qt开发者大会上的一段视屏演讲。

通过QtWebChannel能够实现C++/QML和HTML/javascript客户端之间进行无缝桥接，目前主要支持两种方式的桥接。

 

  • l  客户机可以是任何支持WebSockets的JavaScript runtime机器和应用，客户机可以是独立的应用或浏览器。也就是说QtWebChannel是基于WebSockets协议之上。
  • l  通过IPC的方式实现C++/QML和HTML/javascript客户端之间进行通信。在QT应用内嵌入HTML或JS页面的情况下使用基于IPC的WebChannel通信效率更高效。

 

 

在官方演进路线中提到将来的集成解决方案将支持以下特性：

 

  • l  使用object标签嵌入Qt Widgets组件。这可以让使用Ｃ++代码的Qt组件包含在网页中，作为网页的部分外观。
  • l  在JavaScript中访问Ｃ++对象。你可以在JavaScript环境中插入Ｃ++对象，让网页脚本直接访问你的数据结构。
  • l  在Qt中执行JavaScript。你可以在Ｃ++调用网页环境中的JavaScript函数，触发网页事件。
  • l  共享客户端存储。在JavaScript和Ｃ++中你都具有访问数据库的能力，这样当下线时也能共享大量数据。

 

 

3.  QtWebChannel实现C++和HTML/javascript页面之间通信实例

在实例中在一个界面里实现集成QT C++组件和QWebEnginePage中嵌入的HTML页面通信，左边的lineedit组件中输入的内容通过一个document对象又QtWebChannel传到web页面，并又js解析在HTML页面上显示，右边HTML页面中的INPUT标签中输入的内容也由document对象通过QtWebChannel传到QT C++界面。通过QtWebChannel使得JS能够接收到QT C++中传出的对象，及由C++发出的信号，并与相对应的方法关联，C++也能介绍到由JS传来的对象，并调用相应的槽函数。

 

 

工程清单如下：

 

首先，定义一个document对象用于在C++和JS之间传递，该对象实现了信号和槽：

 

Document.h内容：

 

#ifndefDOCUMENT_H
#defineDOCUMENT_H
 
#include<QObject>
#include<QString>
#include"ui_mainwidget.h"
 
namespaceUi{
classMainWidget;
}
 
classDocument:publicQObject
{
    Q_OBJECT
    Q_PROPERTY(QStringtextMEMBERs_textNOTIFYsendText)
 
public:
    explicitDocument(QObject*parent=nullptr):QObject(parent){}
 
    voidsetSendTextText(constQString&text);
    voidsetUi(Ui::MainWidget*ui);
 
publicslots:
    voidreceiveText(constQString&r_text);
 
signals:
    voidsendText(constQString&text);
 
private:
    voiddisplayMessage(constQString&message);
    QStrings_text;
    QStringrecieve_text;
    Ui::MainWidget*mainUi;
};
 
#endif//DOCUMENT_H

 

Document.cpp内容：

 

#include"document.h"
 
voidDocument::setSendTextText(constQString&text)
{
    s_text=text;
    emitsendText(s_text);
}
 
voidDocument::displayMessage(constQString&message)
{
      mainUi->editor->appendPlainText(message);
}
 
/*!
    ThisslotisinvokedfromtheHTMLclientsideandthetextdisplayedontheserverside.
*/
voidDocument::receiveText(constQString&r_text)
{
    displayMessage(QObject::tr("Receivedmessage:%1").arg(r_text));
}
 
voidDocument::setUi(Ui::MainWidget*ui)
{
    mainUi=ui;

}

 

用QT Designer设计主界面，并实现主界面MainWidget类，内容如下：

 

mainwidget.h内容：

 

#ifndefMAINWIDGET_H
#defineMAINWIDGET_H
 
#include"document.h"
 
#include<QWidget>
#include<QString>
 
namespaceUi{
classMainWidget;
}
 
classMainWidget:publicQWidget
{
    Q_OBJECT
 
public:
    explicitMainWidget(QWidget*parent=0);
    ~MainWidget();
 
//publicQ_SLOTS:
//    voidsetEnabled(bool);
 
privateslots:
    voidon_pushButton_clicked();
 
private:
    boolisModified()const;
 
    Ui::MainWidget*ui;
    Documentm_content;
 
};
 
#endif//MAINWIDGET_H

 

mainwidget.cpp内容：

 

#include"mainwidget.h"
#include"ui_mainwidget.h"
#include"previewpage.h"
#include"document.h"
 
#include<QFile>
#include<QWebChannel>
 
MainWidget::MainWidget(QWidget*parent):
    QWidget(parent),
    ui(newUi::MainWidget)
{
    ui->setupUi(this);
 
    PreviewPage*page=newPreviewPage(this);
    ui->preview->setPage(page);
    m_content.setUi(ui);
 
    QWebChannel*channel=newQWebChannel(this);
    channel->registerObject(QStringLiteral("content"),&m_content);
    page->setWebChannel(channel);
 
    ui->preview->setUrl(QUrl("qrc:/index.html"));
 
    ui->editor->setPlainText("hello...\n");
}
 
MainWidget::~MainWidget()
{
    deleteui;
}
 
boolMainWidget::isModified()const
{
    returnui->editor->document()->isModified();
}
 
voidMainWidget::on_pushButton_clicked()
{
 
    m_content.setSendTextText(ui->lineEdit->text());
 
}

 

再定义一个PreviewPage类用于加载HTML页面，在主界面MainWidget类初始化的时候，将他主界面中的WebEngineView初始化为该实例对象，主要初始化代码如下：

PreviewPage*page=newPreviewPage(this);  //创建实例对象

    ui->preview->setPage(page);                 //将对象设置到主界面

ui->preview->setUrl(QUrl("qrc:/index.html"));                               //设置载入的HTML页面

 

previewpage.h内容：

 

#ifndefPREVIEWPAGE_H
#definePREVIEWPAGE_H
 
#include<QWebEnginePage>
 
classPreviewPage:publicQWebEnginePage
{
    Q_OBJECT
public:
    explicitPreviewPage(QObject*parent=nullptr):QWebEnginePage(parent){}
 
protected:
    boolacceptNavigationRequest(constQUrl&url,NavigationTypetype,boolisMainFrame);
};
 
#endif//PREVIEWPAGE_H

 

previewpage.cpp内容：

 

#include"previewpage.h"

 

#include<QDesktopServices>

 

boolPreviewPage::acceptNavigationRequest(constQUrl&url,

                                         QWebEnginePage::NavigationType/*type*/,

                                         bool/*isMainFrame*/)

{

    //Onlyallowqrc:/index.html.

    if(url.scheme()==QString("qrc"))

       returntrue;

    QDesktopServices::openUrl(url);

    returnfalse;

}

 

使用的web页面index.html内容如下：

 

<!DOCTYPEhtml>

<html>

    <head>

       <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

       <scripttype="text/javascript"src="./qwebchannel.js"></script>

       <scripttype="text/javascript">

           //BEGINSETUP

           functionoutput(message)

           {

                varoutput=document.getElementById("output");

                output.innerHTML=output.innerHTML+message+"\n";

           }

           window.οnlοad=function(){

 

           output("settingupQWebChannel.");

           newQWebChannel(qt.webChannelTransport,function(channel){

                //makedialogobjectaccessibleglobally

                varcontent=channel.objects.content;

 

                document.getElementById("send").οnclick=function(){

                    varinput=document.getElementById("input");

                    vartext=input.value;

                    if(!text){

                        return;

                    }

 

                    output("Sentmessage:"+text);

                    input.value="";

                    content.receiveText(text);

                }

 

                content.sendText.connect(function(message){

                    output("Receivedmessage:"+message);

                });

 

                content.receiveText("Clientconnected,readytosend/receivemessages!");

                output("ConnectedtoWebChannel,readytosend/receivemessages!");

           });

           }

 

           //ENDSETUP

       </script>

       <styletype="text/css">

           html{

                height:100%;

                width:100%;

           }

           #input{

                width:400px;

                margin:010px00;

           }

           #send{

                width:90px;

                margin:0;

           }

           #output{

                width:500px;

                height:300px;

           }

       </style>

    </head>

    <body>

       <textareaid="output"></textarea><br/>

       <inputid="input"/><inputtype="submit"id="send"value="Send"οnclick="javascript:click();"/>

    </body>

</html>

 

主程序main.cpp的内容如下：

 

#include"document.h"

#include"mainwidget.h"

#include<QApplication>

 

intmain(intargc,char*argv[])

{

    QApplicationa(argc,argv);

    MainWidgetw;

    w.show();

 

    returna.exec();

}

文中使用的例子可以到链接：http://download.csdn.net/detail/liuyez123/9402132地址下载。

船船船船船
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用Qt Web引擎嵌入H5应用框架源码，可以很方便的将web应用作为桌面应用。
03-09
使用Qt Web引擎嵌入H5应用框架源码。可以很方便的将web应用作为桌面应用。
Qt H5 JS网页端通信和调用
Jeacean的博客
11-27 2287
公司用到了QT 嵌入HTML ，所以需要交互通信，折腾了一波 参考：https://blog.csdn.net/weixin_42436161/article/details/85265796 废话不说上代码 调试方法就是new htmlWindow就行了 htmlWindow.h #ifndef HTMLWINDOW_H #define HTMLWINDOW_H #include <Q...
QT 使用 QWebChannel 与 Web 端通信展示文件信息
庄周de蝴蝶的博客
01-31 1165
获取指定文件夹下的文件信息。通过使用 QT 的 QFileSystemWatcher 对指定文件夹进行监听，以实现可以获取到文件变更信息并实时展示在浏览器端。最终实现的效果如下：本文涉及到的完整代码已上传到GitHub。阅读本文前需要对 QT 的基础知识（比如信号槽）及 QWebChannel 模块有基本的了解。
让你的 Qt 桌面程序看上去更加 native（一）：简介
weixin_34121304的博客
12-15 185
《让你的 Qt 桌面程序看上去更加 native》是一个系列文章。在这个系列中，你将会了解到如何让你的 Qt 桌面应用程序看上去更加 native。这里，我假设你已经清楚如何使用 Qt 编写桌面应用程序，因为文章中大多都是所谓的“细节”，而有时候恰恰是这些“细节”决定着用户体验。同时，这里的程序都是指桌面程序，不包括各个嵌入式平台。 关于 Qt 的介绍这里就不再赘述。这里只...
qt和html5,Qt 对比 HTML5 ——正反两面
weixin_29032489的博客
06-18 1578
支持的平台HTML5的支持无处不在Qt支持所有主流平台(而且非主流平台碰巧用它做UI)理论上你可以用HTML5适配更多平台，但这不是大多数开发人员在现实世界里使用它的原因。HTML5开发者越来越多地放弃浏览器以及构建混合app。大部分移动开发者针对Android、iOS、Windows Phone和BlackBerry 10当中的几个平台开发。Qt 不仅支持这些平台，而且还支持更多。事实上，在...
通过WebChannel/WebSockets与QML中的HTML交互
diaoyanbian8143的博客
01-08 367
来源：通过WebChannel/WebSockets与QML中的HTML交互 GitHub:八至 作者：狐狸家的鱼 本文链接：QML与HTML交互 在查询QML与HTML之间通信交互时资料很少，这篇文章讲解的比较清楚 一、前言 Qt允许使用所谓的混合GUI创建应用程序——在这种GUI中，可以将本机部件与基于html的内容混合在一起。通过WebChann...
qt与前端消息交互qt与前端消息交互
05-31
qt与前端消息交互qt与前端消息交互
QT与ECharts交互
04-18
QT与ECharts交互，绘制曲线图，适合新手参考 转载的某位大佬的，大佬大佬没收积分，故免费
基于Qt的与OXYGEN交互的试验数据传输系统.zip
最新发布
03-21
基于Qt的与OXYGEN交互的试验数据传输系统.zip 基于Qt的与OXYGEN交互的试验数据传输系统.zip 基于Qt的与OXYGEN交互的试验数据传输系统.zip 基于Qt的与OXYGEN交互的试验数据传输系统.zip 基于Qt的与OXYGEN交互的试验...
qt与JavaScript交互
05-03
qt与JavaScript交互
Qt与JS的数据交互
04-19
演示了使用 QWebChannel 在Qt(QWebEngineView/QWebEnginePage)与JS之间的数据交互。示例工程非常简单，使用QtCreator直接打开即可运行（需Qt5.6.2以上）。
小问题解决方案
阿岳的博客
11-24 2600
QT 5.12.12 QWebEngineView 浏览器点击链接崩溃
Qt嵌入浏览器—QWebEngineView实现浏览器基本功能（内含代码例子）
热门推荐
bigger_belief的博客
03-03 1万+
Qt嵌入浏览器—QWebEngineView实现浏览器基本功能
Qt+H5Iframe 报错qt is not defined原因
https://ligo100.cn 小何博客欢迎访问。
05-03 2510
文章目录[隐藏] 1.前言2.解决方案 1.前言这次项目用到Qt 通过 Webengine 和 H5 交互时，由于同事一直把页面写在一个页面，而我在 H5 端用到 iframe，在调用Qt时出现了“qt is not defined”，在网上找了很久都没找到于是就自己捣鼓。2.解决方案经过测试首先看路径是否写对，测试方法如果把路径写对了不会提示“QWebChannel is not defin...
Qt 与 HTML JS 的交互----本人备注
xqhrs232的专栏
05-27 387
原文地址::Qt 与 HTML JS 的交互_天干之乙地支乙亥的博客-CSDN博客_qt与html交互 相关文章 1、Qt5.6 c++与网页html/js的交互实现----Qt5.6 c++与网页html/js的交互实现_Dreaming9527的博客-CSDN博客_c++和html交互 2、实现QT与HTML页面通信----实现QT与HTML页面通信_hou_jiangzhen的博客-CSDN博客_html qt 3、qt与html文档交互,QWebChannel示例学习，Qt与网页交互-.
Qt+HTML5知识点总结
张鹏宇的专栏
09-04 3981
收效甚微飞飞落异端邪飞落飞落飞落民间艺术民间艺术习
关于QT实现和html页面的交互
rice__pudding的博客
12-21 4508
1.通过QWebEngineView引入html页面, .pro文件中引入webenginewidgets，webengine，network，webchannel组件 组件可以通过QT软件根目录的MaintenanceTool.exe安装，设置中选择临时资料档案库，临时资料档案库可以在网上找资源路径（我用的是：http://mirrors.ustc.edu.cn/qtproject/online/qtsdkrepository/mac_x64/root/qt/，如果临时资料档案库测试是失败的，可能是因为没
qt与html文档交互,QWebChannel示例学习，Qt与网页交互
weixin_42297347的博客
06-07 1120
0.简述QWebSocket配合QWebChannel，可以将QObject暴露给HTML客户端。如Qt文档所述，通过将QObject派生对象发布到QWebChannel并在HTML端使用qwebchannel.js，可以透明的访问QObject的属性和public槽/方法。不需要手动消息传递和数据序列化，C++端的属性更新和信号发射会自动传输到可能远程运行的HTML客户端。在客户端，将为任何已发...
qt 与mysql建立交互式连接
06-09
要在Qt中与MySQL建立交互式连接，需要进行以下步骤： 1. 安装MySQL驱动程序：在Qt中使用MySQL需要安装MySQL驱动程序。你可以从Qt官方网站下载可用的驱动程序，也可以使用Qt提供的商业驱动程序。 2. 在Qt项目中包含MySQL头文件：在Qt项目中使用MySQL时，需要在代码中包含MySQL头文件。 3. 建立数据库连接：使用QSqlDatabase类在Qt中建立数据库连接。在连接数据库之前，需要设置数据库驱动程序和数据库名称。 4. 执行SQL语句：一旦连接成功，就可以使用QSqlQuery类执行SQL语句。你可以使用该类执行SELECT、INSERT、UPDATE和DELETE等SQL语句。 下面是一些示例代码，演示如何在Qt中与MySQL建立交互式连接： ```c++ #include <QCoreApplication> #include <QtSql> int main(int argc, char *argv[]) { QCoreApplication a(argc, argv); // 设置MySQL驱动程序 QSqlDatabase db = QSqlDatabase::addDatabase("QMYSQL"); db.setHostName("localhost"); db.setDatabaseName("mydatabase"); db.setUserName("myusername"); db.setPassword("mypassword"); // 打开数据库连接 if (!db.open()) { qDebug() << "Failed to connect to database!"; return 1; } // 执行SQL查询 QSqlQuery query; query.exec("SELECT * FROM mytable"); while (query.next()) { QString name = query.value(0).toString(); int age = query.value(1).toInt(); qDebug() << name << age; } // 关闭数据库连接 db.close(); return a.exec(); } ``` 这只是一个简单的示例，你可以根据自己的需要进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值