Qt Example各例子技术点说明（五）

说明：

下面的XX.XX.XX为Qt的版本号，如：5.14.1。

下面总结的都是以Qt的5.14.1版本来说明的，未来的版本也许和这有些不同。

因为Qt自带的例子很多，本博文是第5部分，第1、2、3、4、6部分请参见如下链接：

• 《Qt Example各例子技术点说明（一）》。

• 《Qt Example各例子技术点说明（二）》。

• 《Qt Example各例子技术点说明（三）》。

• 《Qt Example各例子技术点说明（四）》。

• 《Qt Example各例子技术点说明（六）》。

1.webchannel

本大节展示如何利用QWebChannel类及其相关类用法；实现和远程或本地的html网页或javascript进行通信和数据交互。存放目录为：

Examples\Qt-XX.XX.XX\webchannel

注：本大节中的很多例子需要懂点web的技术，才能更改理解。

1.1.chatserver

该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\webchannel\chatserver

本工程展示如何利用QWebSocketServer构建一个类似Web服务器，再利用QWebChannel向外部html和javascript网页客户端暴露一个QObject的对象，然后利用从派生的QWebChannelAbstractTransport子类在html和javascript网页与QWebChannel暴露的QObject的对象之间构建通信链路，以使这两者之间可以进行通信和数据交互。通过本工程需要掌握如下技术点：

• QWebSocketServer类用法及其与QTcpServer类之间的区别和关系。

• QWebChannelAbstractTransport类作用及如何派生子类。

• QWebChannel类用法及通过该类的registerObject函数向外部网页端暴露QObject的对象。

• QWebSocket类用法及其和QTcpSocket的区别。

关于这几个类的用法及之间的关系，参见：

《浅谈QWebChannel、QWebChannelAbstractTransport、QWebSocketServer、QWebSocket用法及之间关系》。

说明：本例子运行步骤如下：

1. 启动本程序，出现控制台界面。

2. 看看目录Examples\Qt-XX.XX.XX\webchannel\chatclient-html目录下是否有qwebchannel.js文件。如果没有，则进行第3步；如果有，则进行第4步。

3. 将Examples\Qt-XX.XX.XX\webchannel\shared\qwebchannel.js拷贝一份到 Examples\Qt-XX.XX.XX\webchannel\chatclient-html目录。

4. 用浏览器打开Examples\Qt-XX.XX.XX\webchannel\chatclient-html\chatclient.html。在弹出的页面登录框随意输入一个字符串。

5. 本程序控制台界面会出现登录成功信息。

1.2.standalone

该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\webchannel\standalone

展示的技术知识点，同1.1节的chatserver，不再详述。

2.webenginewidgets

本大节展示如何利用QWebEngineView、QWebEnginePage类及其相关类用法；实现通过Qt窗体加载html网页或javascript页面。存放目录为：Examples\Qt-XX.XX.XX\webenginewidgets

2.1.contentmanipulation

该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\webenginewidgets\contentmanipulation

本工程通过QWebEngineView加载http页面和js文件，展示QWebEngineView、QWebEnginePage类及其相关类用法。

通过本类需掌握如下技术点：

• QWebEngineView、QWebEnginePage用法，通过这两个类加载js、html。

• 利用Qt::AA_EnableHighDpiScaling设置高清屏。

2.2.cookiebrowser

该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\webenginewidgets\cookiebrowser

本工程展示Qt操作页面cookie技术。通过本工程，需掌握如下技术点：

• QNetworkCookie、QWebEngineCookieStore、QWebEngineView类使用。

• 利用Qt::AA_EnableHighDpiScaling设置高清屏。

2.3.html2pdf

该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\webenginewidgets\html2pdf

本工程通过QWebEnginePage类的printToPdf函数将页面转为pdf。通过本工程需掌握如下技术点：

• QWebEnginePage类用法。

• QWebEnginePage类的loadFinished、pdfPrintingFinished信号；printToPdf函数将页面转为pdf。

• 利用Qt::AA_EnableHighDpiScaling设置高清屏。

• QPageLayout类设置页面布局，如：尺寸大小、空白、页面阅读方向（竖排、横排）。

说明：本工程运行，需要设置页面http输入参数和输出pdf的存放到本地的绝对路径，如下为Visual Studio 设置的输入、输出参数：

2.4.maps

该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\webenginewidgets\maps

本工程通过加载谷歌地图，展示如下技术点用法：

• QWebEngineView、QWebEnginePage类用法。

• QWebEnginePage的featurePermissionRequested信号含义。

• QWebEnginePage::PermissionPolicy、QWebEnginePage::Feature枚举变量含义。

• 利用Qt::AA_EnableHighDpiScaling设置高清屏。

2.5.markdowneditor

该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\webenginewidgets\markdowneditor

本工程实现一个markDown编辑器，通过本工程，需掌握如下技术点：

• QWebEnginePage类作用及如何子类化。

• QWebChannel、QWebEnginePage、QWebEngineView、QObject之间的关系。即QWebEngineView类通过setPage函数将QWebEnginePage设置为自己的页对象；QWebEnginePage通过setWebChannel函数将QWebChannel对象设置为自己的web通道对象；而QWebChannel和QObject之间的关系，参见《浅谈QWebChannel、QWebChannelAbstractTransport、QWebSocketServer、QWebSocket用法及之间关系》博文。

• QPlainTextEdit类用法。

• 利用Qt::AA_EnableHighDpiScaling设置高清屏。

2.6.minimal

该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\webenginewidgets\minimal

本工程实现用QWebEngineView类加载一个页面到Qt窗体进行展示。通过本工程需掌握如下技术点：

• QWebEngineView类用法。

• 利用Qt::AA_EnableHighDpiScaling设置高清屏。

2.7.notifications

该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\webenginewidgets\notifications

本工程展示如何将Html5页面通知发送到Qt窗体。要弄懂本工程，需先了解Html5页面通知技术。关于该技术，请参考《聊聊HTML5中的Web Notification桌面通知》。通过本工程，需掌握如下技术点：

• 如何利用QWebEngineNotification类和html5消息进行交互。

• QWebEnginePage类的用法及如何子类化该类；特别是该类的featurePermissionRequested信号及setFeaturePermission函数用法。

• QWebEngineView类用法。

• 利用Qt::AA_EnableHighDpiScaling设置高清屏。

在Qt Assistant索引页的查找框输入QWebEngineNotification，在对该类的详细描述中，可以找到Qt官方对该工程的详细说明，如下：

2.8.printme

该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\webenginewidgets\printme

该工程展示如何打印页面。通过本工程需掌握如下技术点：

• QWebEngineView类用法。

• QWebEnginePage类用法。特别是该类printRequested信号用法。

• 打印相关类用法，如：QPrinter、QPrintPreviewDialog、QPrintDialog用法。

• 利用Qt::AA_EnableHighDpiScaling设置高清屏。

2.9. simplebrowser

该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\webenginewidgets\simplebrowser

该工程展示如何用Qt实现一个简单的浏览器。可以通过该浏览器浏览页面、下载文件等。通过本工程需要掌握如下技术点：

• QWebEngineSettings类设置web各种属性。

• QWebEngineProfile类用法。

• QWebEnginePage、QWebEngineView类用法。

• 利用Qt::AA_EnableHighDpiScaling设置高清屏。

• 本例子将QKeySequence用到了极致，是学习QKeySequence类的不可多得的例子。

• 用于管理下载的QWebEngineDownloadItem类的用法。

2.10. stylesheetbrowser

该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\webenginewidgets\stylesheetbrowser

该工程展示如何在web页面运行一段javasript代码来改变页面风格，如：让页面旋转180°。通过本工程，需要掌握如下技术点：

• QWebEngineView类用法，例如：该类的urlChanged信号。

• qRegisterMetaTypeStreamOperators用法，具体参见：Qt中以qRegister开头的几个函数的用法说明。

• QWebEnginePage类用法及调用runJavaScript函数运行一段javaScript代码，实现对页面的更改。

• QWebEngineScript类用法，如何用该类封装一段javascript。

• qMakePair函数的作用,功能同std::make_pair。

2.11.webui

该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\webenginewidgets\webui

平常用的一般为http、https、FTP协议等，但本工程通过实现自定义配置URL的Scheme,如：webui:about。通过本工程需要掌握如下技术点：

• 如何通过QWebEngineUrlScheme类实现自定义配置URL的Scheme。

• 如何通过QWebEngineUrlSchemeHandler类实现对自定义配置URL的Scheme的处理。

• QWebEngineProfile、QWebEnginePage、QWebEngineView用法及之间的关系。

由于Qt官方自带的例子很多，一下看不完，每看完一个例子，记录一个。未完，待续！