Web页面嵌入到Qt注意事项

目前，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)

上一节中我们讲解了基于CEF浏览器开发的基本方法，并实现了QCefView控件和其核心组件QCefClient。 >>点这里回顾上节内容

先来回顾一下上一节中提到的CEF3应用整体结构：

其槐备中第三条浏览器实例相关的实现在上一节中已经完成了，本篇我们将继续完成另一个核心组件QCefApp的开发，并通过实际使用QCefView，展示如何提供CEF初始化入口，最终完成浏览器核心功能和基本UI的开发。

本篇的小目标：

和CefClient类似，我们的应用程序需要提供一个CefApp的封装，来处理进程相关的回调——这里进程相关的回调对铅枯毁于我们要实现的简单浏览器而言，就是对浏览器进程本身的管理。因此，我们的QCefApp组件头文件声明如下：

和CefClient类似，CefApp也可以通过继承多个接口的方式实现进程级的各类管理。因为我们要实现的简单浏览器暂时不涉及太多复杂的管理，所以这里只简单实现了浏览器进程处理和上下文初始化的接口。同样和CefClient类似，对于CefXXXHandler接口，只需要将引用设为本实例，即可重载对应接口所提供的方法了。

额外说明一点：这里的创建浏览器进程方法里有一个添加ca证书的方法，目前先作为预留，有关ca证书和https的话题在之后的小节中会有专门的讲解。

浏览器上下文初始化、添加和关闭浏览器接口的具体实现如下：

通过上面的实现可以看出，添加浏览器实例进程实际上就是创建了一个QCefClient的引用，并将这个引用和浏览器相关的一些设置传入到静态方法CefBrowserHost::CreateBrowser中。而OnContextInitialized方法通过设置m_contextReady标志确保在创建浏览器实例时CEF上下文已初始化完成。

在完成CefApp组件的实现后，我们已经基本凑齐了启动CEF所需的零件。最后让我们来看看败迅如何把这些零件借助CEF程序入口组装起来。

首先，声明一个QCefContext类，来封装CEF程序入口所需的基本设置和初始化方法：

其中，负责初始化CEF的initCef方法实现如下：

这个初始化方法包含了下面流程：

这里需要特别说明的是，CEF应用在默认情况下包含很多子进程（渲染进程、插件、GPU进程等等），这些进程会共享同一个执行入口。这里我们简单起见，仅就主进程进行处理——从上面的实现可以看到，当检测到当前进程为主进程时，创建一个CefApp的实例即可。这个实例的引用会通过cefApp()方法提供给需要获取CefApp的其他组件使用。

接下来我们来看看如何实际使用上面封装好的程序入口。

首先声明一个继承了QDialog的主窗口MainDlg:

在这个主窗口的构造方法中，会调用初始化QCefView的方法initWebview：

initWebview方法包含了QCefView界面布局相关的一些设置，这里我们略过这些实现，只专注于QCefView本身初始化的流程：

从上面的实现可以看出，这里我们只需要通过CefApp的添加浏览器方法获取QCefClient的引用，并将其提供给QCefView，就能简单完成QCefView控件的创建。

回到整个应用程序的入口，也就是main函数，除了传统Qt应用的实现之外，还需要添加一下CEF入口相关（也就是我们上一小节封装好的QCefContext）的实现：

至此，我们的浏览器应用初版终于完成了。运行一下看看效果：

本节所涉及到的组件及其流程可以总结为下面的时序图：

有关基于CEF的浏览器基本功能的实现，就讲解到这里了。下一节我们将介绍如何基于CEF实现浏览器与页面的互相通信。

>>返回系列索引

[1] Chromium Embedded Framework官网

[2] Chromium Embedded Framework官方教程

---