如何利用 QT 进行 web 与本地混合应用开发

如何利用 QT 进行 web 与本地混合应用开发,第1张

一、Qt Webkit 集成利用Qt的Webkit 集成与QtNetwork模块,你完全可以进行本地桌面与web混合应用开发,你可以自由地混合JavaScript,样式表,Web内容和Qt组件。 Webkit是一个非常成熟的web浏览引擎。Qt中集成了这个大名鼎鼎的引擎,通过QtWebkit,你可以在C++ 中执行JavaScript,或者在网页中集成C++对象,并且通过JavaScript和这些对象进行交互。一个现代的HTML渲染引擎只 是混合开发的一半,另一半就是本地应用和渲染对象的交互。QT的Webkit 集成提供了这种解决方案:1.使用object标签嵌入Qt Widgets组件。这可以让使用C++代码的Qt组件包含在网页中,作为网页的部分外观。2.在JavaScript中访问C++对象。你 可以在JavaScript环境中插入C++对象,让网页脚本直接访问你的数据结构。3.在Qt中执行JavaScript。你者竖可以在C++ 调用网页环境中的JavaScript函数,触发网页事件。4.共享客户端存储。在JavaScript和C++中你都具有访问数据库的能 力,这样当下线时也能共享大量数据。二、与嵌入的Qt对象交互使用QWebView 组件,有两种方法可以在网页中嵌入C++对象。你可以在网页的JavaScript中添加C++对象,或者也可以创建一个插件,然后在网页中使用 object标签嵌入。

第二种方法更容易入手。当在网页中放入 Widget组件时,它的所有public slots就像普通函数一样被网页中的尘冲JavaScript函数访问。要在网页中添加一个Widget,首先要告诉你的QWebPage对象,该Widget可用,这个通过子类化QWebPlugFactory完成,你需要 重新实现两个方法:plugs和create。plugs方法通知网页该Widget可用,create方法根据请求创建widget。在HTML网页中,widgets使用object标签创建。比如,下面这个标签派嫌歼试图创建一个 application/x-qt-colorlabel 组件。 要利用这种创建,必须要允许使用插件并且要告诉QWebpage插件的工厂类。在下面的代码中,ColorLabelFactory将 会根据application/x-qt-colorlabel的请求创建相应实例。QWebSettings::globalSettings()->setAttribute(QWebSettings::PluginsEnabled, true)webView->page()->setPluginFactory(new ColorLabelFactory(this))ColorLabel有一个公开的slot: chagneColor(),这个对于网页中的JavaScript自动可用。在网页中插入一个指向该元素的链接,可以以一种简单的方式激活C++函数。Change color!a>要反方向推进事件,必须要使你的对象在JavaScript文档上下文中可用。要对QWebPage的每一个 QWebFrame,调用addToJavaScriptWindowObject方法。这个方法允许你根据名字把一个对象添加到JavaScipt上下 文中。webView->page()->mainFrame()->addToJavaScriptWindowObject( "eventSource", new eventSource( this ) )要连接刚添加对象eventSource的信号,要加上一段JavaScript代码,使用evaluateJavaScript方法 完成。下面的代码将把eventSource对象的signalName信号连接到一个JavaScript函数destFunction。webView->page()->mainFrame()->evaluateJavaScript( "eventSource.signalName.connect(destFunction)" )如果你把一个对象添加到一个以标准浏览器查看的JavaScript页面中,有一个信号需要知道。每一次JavaScript 内容被清除,Frame都会释放 javaScriptWindowObjectCleared 信号。

WebSocket 是基于Web的协议,旨在在客户端应用程序和远程主机之间实现双向通信。如果初始握手成功,它将使两个实体来回发送数据。 WebSocket 是应用程序通过较少的网络延迟和最少的数据交换来获取实时数据源的解决方案。

Qt WebSockets 模块提供了C ++和QML接口,这些接口使Qt应用程序充当可以处理 WebSocket 请求的服务器,可以充当从服务器接收的数据的客户端的客户端,或者两者都可以。

要包括模块类的定义,请使用以下指令:

要将QML类型导入到您的应用程序中,请在.qml文件中使用以返前巧下import语句:

要链接该模块,请将以下行添加到您的qmake .pro文件中:

Qt WebSockets 使您能够构建支持 WebSocket 的应用程序。它提供了 WebSocket 协议的实现,该协议由IETF(Internet工程任务组)提供,是使用现有Web基础结构进行双向通信的更好替代方案。

从历史上看,需要双向通信或推送通知的Web应用程序必须使用可用的基于HTTP的解决方案。这些解决方案采用了诸如轮询,长轮询和流传输之类的不同技术来克服HTTP协议的局限性,这些协议并非针对此类用例而设计。这导致高网络延迟,不必要的数据交换以及陈旧或旧数据。IETF 的 WebSocket 产品有助于在很大程度上克服这些问题。

如您漏键在图片表示中所看到的,基于 WebSocket 的解决方案由客户端和服务器端组成。大多数流行的Web浏览器(例如Google Chrome,Internet Explorer,Safari等)都提供对 WebSocket 的本地客户端支持。 WebSocket 的服务器端支持使其成为完整的解决方案,从而实现了双向通信。任何具有本地 WebSocket 支持的浏览器都应允许您使用HTML5 WebSocket API 运行基于HTML和JavaScript的简单客户端应用程序。

网页套接字WebSocket 连接开始于初始HTTP兼容握手,这保证向后兼容性,使得 WebSocket 连接可以共享默认HTTP(80)和HTTPS(443)端口。成功握手后,连接将打开以进行数据交换,直到两个实体之一结束连接。

网页套接字WebSocket 协议使用 ws :和 wss :URL方案分别代表不安全和安全的 WebSocket 请求。在初始握手期间,如果检测到代理服务器,则协议会通过向 HTTP CONNECT 代理发布一条语句来尝试建立隧道。尽管已证明在安全连接中使用TLS(传输层安全性)可以更好地工作,但无论请求类型如何,都使用隧道方法来处理代理。

WebSocket 最适合以下情况:

我们努力使用传统方法来实现这些目标的一些示例应用程序例如:即时消息传递,在线游戏,在线股票交易等。

Qt WebSockets 模块提供API,以开发基于 WebSocket 的服务器和客户端应用程序。可以使用这些API的示例是提供股票数据的服务器应用程序,以及当少数股票价格发生变化时注册推送通知的客户端应用程序。

该模块提供API的C ++和QML版本,因此您可以选择适合您需要的替代方法。

客户端应用程序通常依赖于外部服务来获取数据。这些服务提供商中的大多数还不支持 WebSocket ,因此最终需要开发可 可感知WebSocket(WebSocket-aware) 的服务器应用程序以弥合差距。您可以在企业 WebSocket 网关服务(例如云服务)上运行服务器,悔燃从而避免了维护承载此类服务所需的必要基础结构的麻烦。

大多数云服务都提供平台即服务(PaaS)后端,该后端可在云上部署和运行服务器应用程序的实例。客户端应用程序可以使用 WebSocket URL 连接到正在运行的服务器并接收数据。

目前,web页面嵌入Qt框架方式:

Qt:系统、一级、二级菜单框架;底部消息栏。

Web:三级菜单子页面。

开发方式:在web环境下开发完成后,将单独页面嵌入到qt中,html、js等文件都作为资源加入到qt工程中。

1、html页面中引入webchannel库:

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

<亏哗script src="../../../../js/component/webchannel.js"></script>

其中,webchannel.js中,初始化了qt与web之间的通道,并定义qt与web之间的消息类型和内容。消息类型对应各个页面具体功能。新渣判加的页面消息需要在该文件中添加。

2、Qt中相应子页面中加入web页面路径:

例如 epvl模型研判页面 JudgePool.qml:

以上步骤完成,就可以在Qt中看到web页面了。接下来需要注意的事项:

3、每个web页面下的初始化函数都必须在qt侧调用,因为初始化用到的一些如userinfo等信息需要Qt侧传入。并且在web页面初始化完成后调用。

(1)web页面中,加入页面初始化完成信号。

(2)Qt页面中,加入消息接收,并发送到web页面初始化消息。

(3)在webchannel.js中,加入web页面初始化函数销梁行。

4、遇到的问题:

(1)html中引入的js,如placecode.js等,都有初始化函数,凡是涉及到userinfo的都需要在qt侧调用。

(2)web中对文件名称大小写不区分,在Qt中严格区分。

(3)父页面d窗中是一个iframe的情况,iframe初始化问题解决方法:

iframe的路径不能在父页面静态加载,这样会导致iframe的js先于父页面的js加载,正常逻辑应该父页面的js先加载

需要在父页面定义一个方法来触发iframe的初始化方法

(4)页面跳转之后,需要调用跳转目的界面方法的问题:

1.web端js需要发出跳转信号

举例:案事件库的案件详情界面中跳转至【案件比对】(case_lib.js)

2.qt端qml接收跳转信号,调用CommonFun.jumpSystemPage方法,再向web端发信号调用目的界面的方法

注意: 目的界面有可能是初次打开,需要等目的界面初始化完成才能发调用web端方法(CaseLib.qml)

3.qt端目的界面需要定义初始化完成的信号,便于其他qt界面知道界面初始化完成:

(<u>compare_case.js</u>)

(<u>CompareCase.qm</u>l)


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12324813.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存