QCefView编译配置（Windows-MSVC）（11）

mahuifa
959 阅读4分钟

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源码

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

  • 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；

    在这里插入图片描述

avatar
文章
阅读
粉丝