1、背景
Web网页的界面交互相比较Qt客户端而言有着比较大的优势:更加的多样化和更高的使用便捷性使得我们即使在客户端中也可以考虑将web网页嵌入到客户端的界面当中。如此便能将web的优势和客户端进行结合。更加丰富客户端的界面及功能,以下将介绍几种常见的Qt客户端中嵌入web网页的实现方案和实现步骤。
2、实现方案设计
1、基于Qt自带控件实现
1.1简介
在Qt中,提供了一个用于访问网页的控件(不同的Qt版本对应不同的控件模块),集成了浏览器的webkit内核和google的引擎,不严谨的说,这个控件其实就是一个简易版的浏览器。
Qt5.0~5.4:webkitwidgets模块 - QWebView
Qt5.4之后:webenginewidgets模块 - QWebEngineView
此处我们客户端的qt选型为qt5.9.6,故采用QWebEngineView。
1.2环境配置
Qt5.9.6 + VS2015
注:查看本地的Qt是否有webenginewidgets模块,最简单的方法可右键任意的Qt工程->Qt Project Settings->Qt Modules查看WebEngine Widgets模块是否为灰色,若为灰色则说明未配置此模块,不可选用,需要重装Qt并选中此模块即可。
1.3开发流程
在配置好Qt模块后,便可像普通的button或label一样通过拖ui控件或者直接new的方式来使用。
代码示例:
效果图展示:
1.4总结
至此一个简单的Web页面就嵌入成功了,但是基于这种方式实现的浏览器存在弊端:不能对视频进行解码播放,只能查看静态页面。因为Qt组件底部集成的浏览器内核(Chrome浏览器的内核,内核版本由Qt版本决定)是不带解码库的,所以不能进行视频播放。但是可以通过加编译配置重新编译这个控件的源码实现,编译对硬件要求较高,且时间较长。故对于有视频播放功能的需求,不建议作为常规方案采用。
2、嵌入Chrome.exe进程实现
2.1简介
这种实现方式和本地的Chrome浏览器功能上没有差别,在本地浏览器能实现的功能,通过这种方式嵌入到Qt窗口中仍是正常的。实现的本质是从客户端启动浏览器进程并传相应的url及其他参数,再通过Windows的API获取到窗口句柄,进而将窗口句柄进行QWigetde 的转换,实现嵌入。
2.2环境配置
Qt5.9.6 + VS2015
依赖本地的Chrome,所以必须要先下载并安装谷歌浏览器。