QCefView编译配置（Windows-MSVC）

更多精彩内容
👉个人内容分类汇总 👈
👉Qt - Web混合开发👈

1、概述

• 什么是CEF

  Chromium嵌入式框架（CEF）是一个简单的框架，用于在其他应用程序中嵌入基于Chromium的浏览器。

  CEF是由Marshall Greenblatt于2008年创立的BSD许可开源项目，基于Google Chromium项目。与主要专注于Google Chrome应用程序开发的Chromium项目本身不同，CEF专注于促进第三方应用程序中的嵌入式浏览器用例。CEF 通过提供生产质量的稳定 API、跟踪特定 Chromium 版本的发布分支和二进制发行版，将用户与底层 Chromium 和 Blink 代码的复杂性隔离开来。CEF 中的大多数功能都有默认实现，这些实现提供丰富的功能，同时用户几乎不需要集成工作。

• 什么是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互操作

2、准备工作

• Qt版本：Qt5.12.5

• 编译器：MSVC2017-64

• 可以下载我打包好的QCefView+CefViewCore+cef源码

  • 链接：https://pan.baidu.com/s/10dUWZBUNwm7PFLr1tzsuXw 提取码：uv2k
  • https://download.csdn.net/download/qq_43627907/87613483

• 可以下载我编译好的库文件

• QCefView官方网站

• CEF源码

• CMake：QCefView通过CMake管理项目构建，所以请先安装CMake。最低要求版本为3.19.1，推荐使用最新版本。

• CefViewCore：

  • 我选择的版本：

  • 下载命令：git clone https://github.com/CefView/CefViewCore.git

• QCefView：

  • 我选择的版本：

  • 下载命令：git clone https://github.com/CefView/QCefView.git

• 将CefViewCore下载后拷贝到QCefView文件夹下

  

  

3、添加环境变量

• 第一步需要添加QTDIR环境变量，否则CMAKE构建时会报错；

• 在开始菜单搜索【环境变量】

  

• 打开【系统属性】窗口，点击【环境变量】按键；

  

• 点击【新建】，变量名输入【QTDIR】，变量值输入【D:\Qt\Qt5.12.5\5.12.5\msvc2017_64】

  

4、更换cef源码版本

• MSVC-2017编译器不支持编译新版本的cef，经过测试，可以选择【91.0.4472.164】以下版本；

• 打开CefViewCore文件夹下的CefConfig.cmake文件，将高版本的注释掉，取消91版本的注释；

  

5、CMake构建

• 创建一个build文件夹，打开CMake，将QCefView文件夹下的CMakeLists.txt拖入CMake中，然后将构建生成路径设置为创建的build文件夹；

  

• 点击【Configure】，编译器选择【Visual Studio 15 2017，X86】，然后点击【Finsh】；

  

• 这时候如果网络不好或者离线环境则会卡在下列这一步，这是在自动下载cef源码，如果网络不好就会下载失败；

  

• 可以复制https://cef-builds.spotifycdn.com/cef_binary_91.1.23+g04c8d56+chromium-91.0.4472.164_windows64.tar.bz2到浏览器或者迅雷中下载，下载完成后拷贝到QCefView\CefViewCore\dep文件夹下，然后点击【Configure】，就会自动解压cef源码；

  

• 勾选【BUILD_DEMO】可以同时编译生成cef的示例程序（可以不勾选）；

  

• 修改编译后的安装路径【CMAKE_INSTALL_PREFIX】；

  

• 点击【Configure】->【Generate】->【Open Project】，自动打开VS；

6、Visual Studio编译

• 鼠标右键选择【ALL_BUILD】->【生成】；

  

  

• 编译后会报下列错误信息；

  严重性	代码	说明	项目	文件	行	禁止显示状态
  错误	C2660	“CefWindowInfo::SetAsChild”: 函数不接受 5 个参数	QCefView	C:\Users\mhf\Desktop\Test\QCefView\src\details\QCefViewPrivate.cpp	102	
  

• 双击错误信息转至报错位置，可以看出这里时通过判断cef的版本宏 是否91版本；

  

• 鼠标选中报错的SetAsChild函数，右键选择【转到定义】；

  

• 可以发现函数定义只有两个参数，而我们选择的CEF版本是【91.1.23】，实际上是大于91的版本，这里宏判断有一点bug；

  

• 将#if CEF_VERSION_MAJOR > 91改为#if CEF_VERSION_MAJOR >= 91，然后【重新生成】就可以编译了；

  

7、安装编译后的文件

• 鼠标右键选择【INSTALL】->【生成】；

  

8、验证编译结果

• 由于在CMake构建时指定了安装路径为E:/QCefView，所以安装后如下所示；

  

• 进入QCefViewTest文件夹下，双击运行QCefViewTest.exe；