QCefView入门及环境配置

一、目的

  最近遇到个需求，公司需要将前端界面嵌入Qt，以便快速开发出炫酷的界面，同时保持web端与桌面端界面的统一（其实主要是省事只用做一份界面）。一开始考虑的是用QWebEngineView来实现，但发现公司使用的Qt版本为Qt5.6，QWebEngineView存在较多的bug（当然目前在Qt5.15已经进行了修复）。所以另寻他法，发现QCefView这个开源库比较流行，并且可以切换要使用不同版本的CEF，以前只是听说过，没有实际用过，今天来实际编译操作一下。

二、QCefView介绍

  QCefView是一个与Chromium Embedded Framework集成的Qt第三方开源库，LGPL许可，可以在项目中免费使用，功能类似CEF、QWebEngineView，提供C++和web交互的能力。

QCefView是什么？

QCefView是为Qt框架开发的一个封装集成了Chromium Embedded Framework库的Wdiget UI组件。使用QCefView可以充分发挥CEF丰富强大的Web能力，快速开发混合架构的应用程序。

• 使用Qt开发者熟悉的Forms，signal/slot来开发应用
• 方便直观的Javascript/C++互操作方式

为何选择QCefView而不用Electron？
从设计思路和最终形态来讲QCefView和Electron是完全不同的技术。

• QCefView只是一个为Qt框架开发的UI组件，Electron则是一个功能完备的应用开发框架
• QCefView是为Native系统开发者设计的，Electron对前端开发者更友好
• QCefView使用C++作为主要开发语言，Electron全部基于Javascript
• QCefView提供便捷直观的Javascript/C++互操作方式，Electron通过编写插件实现Web/Native互操作

QCefView适合开发何种类型的应用？
如果你打算使用Web前端技术来开发你的应用UI，同时保持使用Native方式编写核心业务/功能逻辑，QCefView是最佳选择。

例如：

• 音乐/视频播放器
• 游戏平台
• 工具类应用
  等等……

以上场景中的应用几乎都是基于内容的平台，他们都需要展示很多列表，表格或者有各种复杂特效的页面。基于此种目的，Web前端技术是目前的最好的选择，把UI当作Web前端App来开发，而核心的功能和逻辑仍然使用Native的方式来编写，然后通过QCefView整合，能极大的提升生产效率，并且一份UI代码适配所有主流桌面平台。

如果你打算开发一款浏览器，QCefView并不是较好的选择，因为QCefView设计的目的是UI组件，并不提供作为浏览器的全部特性，该类需求应该使用原生CEF来实现较好。

不喜欢Qt，有其他选择么？
如果你不喜欢使用Qt，你可以选择使用原生CEF来构建定制化的browser view组件，例如你可以将CEF与Cocoa框架进行集成，从而创建一个macOS平台原生的WebView，可以参考：CocoaCefView

官方网址：http://tishion.github.io/QCefView/

Github地址：https://github.com/CefView/QCefView

三、编译准备

  本机编译环境win10、vs2019、Qt5.15.2，cmake3.24，编译采用x64编译方式，最终生成vs2019的解决方案，因此Qt需要使用msvc2019_64。
安装VS2019;
安装Qt5.15.2，添加系统变量；在cmd命令窗口输入：qmake -query，显示如下即表明Qt环境配置好了。

3.1 下载代码

clone QCefView

git clone https://github.com/CefView/QCefView.git

  虽然QCefView工程里有CefViewCore目录，但是是空的文件夹，因此需要再次clone CefViewCore的代码，然后放到QCefView工程里。

clone CefViewCore

git clone https://github.com/CefView/CefViewCore.git

3.2 修改CEF配置文件

  在编译前，需要做些配置修改，由于QCefView依赖于CEF，在用CMake配置项目时，会在线下载CEF工程，如果没有比较好的网络环境(需要才能访问)，可能无法下载CEF二进制包, 对于此问题，可以手动下载CEF二进制包, 放到指定目录即可。下面是修改方式：
打开：F:\QCefView_main\QCefView\CefViewCore\CefConfig.cmake文件，查看自己代码对应的cef版本，例如我的：

# Current version
  "95.7.12+g99c4ac0+chromium-95.0.4638.54"

然后注释掉下面的一句话：意思是如果不存在cef二进制包的话，去这个网址下载；

可以科学上网去访问一下，找到自己对应的版本进行下载压缩包，然后直接解压放到：F:\QCefView_main\QCefView\CefViewCore\dep目录下，结果如下：

此外，需要打开F:\QCefView_main\QCefView\QtConfig.cmake配置文件，修改Qt路径如下：

然后去环境变量里看看是否有Qt相关的设置，有的话最好先删掉，然后添加如下系统配置：

vs2019里的Qt配置：

三、用cmake进行编译

1 、在QCefView根目录建一个文件夹，例如build, 到时候CMake产生的vs sln解决方案放到该目录；

2、打开CMake GUI, 找到QCefViwe目录，指定源码目录和解决方案目录build：

点击 configure; 可以勾选上构建demo; 然后再点击generate生成vs工程。

3、打开VS工程如下，然后点击ALL_BUILD进行生成；然后再点击INSTSLL进行库文件复制拷贝到指定位置，默认在C:\Program Files\QCefView。

四、入门示例

运行自带案例如下，可以按照示例代码进行学习。