CEF | VS2017+Qt5.14.2+cef 实现基于 CEF 框架的客户端

背景

实现一个加载指定网址的客户端。客户端要支持网页的加载、跳转、下载、打印等功能。基本上类似于自己做一个浏览器客户端。综合比较了现在可以使用的一些库和方法，对比之后发现 cef 可以很好的满足所有的需求。cef 的相关知识，可以查看上一篇文章。

cef 源码编译

1.下载 cef 包。

cef 的下载网址： “https://cef-builds.spotifycdn.com/index.html” （可以在输入框输入你要查找的版本号进行查找。）

点击链接下载到本地并解压。

这里选择的是 windows32 位的 cef_binary_89.0.18+gb36241d+chromium-89.0.4389.114_windows32.tar.bz2。

下载 cef 包时要注意编译环境是否支持。

cef 版本对应编译环境详细信息可以查看此链接：“https://blog.csdn.net/evesmith520/article/details/124847427”

2.下载并安装 CMake 工具。

CMake 下载地址：“https://cmake.org/download/”

这里下载的是：

3.生成 cef 的.sln 工程文件。

• 打开安装好的 CMake 工具。

• 选择加压好的 cef 文件夹目录。

• 选择生成目录。（在 cef 文件夹下创建一个 build 文件夹，如果没有自己创建，CMake 会按照路径自动进行创建）

• 

• 点击 Configure。弹出配置窗口进行选项配置。

• 

选择自己需要使用的 VS 的版本，系统的位数等信息。我这里用的是 VS2017，生成 32 位的工程。选择好后点击 Finish。

如果遇到 Configure 报红：

改为：

注意：这里的 CMAKE_INSTALL_PREFIX 的 Value 值最好选择不是 C：盘的路径，可以带中文。因为如果是 C：盘，则启动 VS 时可能需要选择管理员方式打开。

再次点击 Configure:

• 点击 Generate。 这时打印信息最后显示 Configuring done 和 Generate done 就表示成功了。

• 查看生成的工程文件。 在我们创建的 build 文件夹下会生成 cef.sln 等文件。

• 

至此，cef 源码生成完成。

4.VS 打开 cef 工程进行全部编译。

注意： 为了避免 cef 工程编译失败，一定要在 CMake 阶段注意选择的 VS 的版本和系统位数的信息是否正确，如果不正确，那么这一步会导致失败。VS2017+Qt5.14.2 的运行环境的配置可以在我之前的文章中找到，这里直接进行编译工作。

• 打开 cef.sln 工程。

• 点击选中 ALL_BUILD，右键选择生成。

此时会编译失败。需要全局搜索"か"，将 CefString markedText("か")替换为 CefString markedText(demo");

• 再次选中 ALL_BUILD,右键选择清理，然后选择重新生成。

这时工程编译成功。

• 运行 cefsimple 查看运行结果。

需要将 simple_app.cc 文件中的代码 “http://www.google.com” 替换为 “http://www.baidu.com” 。

至此，cef 工程编译完成。以上实现了 cef 库的编译运行，主要是为了生成我们嵌入 cef 模块时所需要的 libcef_dll_wrapper.lib 文件。

如果实在 Qt Creator 上创建的项目想要嵌入 cef 模块，那么还需要一个步骤。

• 生成动态链接库文件。

上面编译生成了 libcef_dll_wrapper.lib 静态库，默认使用的是 MTd 的链接方式，而 Qt 中常使用的是动态链接（即 MDd），所以需要使用 MDd 的方式重新编译 libcef_dll_wrapper.lib。

右键项目 libcef_dll_wrapper->属性->C/C++->代码生成->运行库：改为“多线程调试 DLL (/MDd)”（如果是 release 版，则改为“多线程 DLL (/MD)”）。然后重新生成就可以了。

注意： Qt Creator 创建的嵌入 cef 功能的项目，debug 运行加载的页面是空白的（有问题），所以只能创建 release 版本。

所以这一步如果是 VS 创建的项目，则生成 debug 和 release 的 lib 库都可以。

如果项目是 Qt Creator 创建的，只能生成 release 版本的 lib 库才可以。

Qt Creator 创建 CefBrowserDemo

1.新建一个 Qt 项目。

这里将项目名称命名为 CefBrowserDemo。这里实现了在 Qt Creator 创建一个项目，移植 cefsimple 到项目中。

2.将所需的 cef 文件添加到项目中。

所需的 cef 文件上面步骤已经生成好了。需要配置：

• 将 cef 目录下的 include 文件夹拷贝到项目.pro 文件所在的路径中。

• .pro 文件路径下新建 lib 文件夹。将 cef 目录下的 libcef_dll_wrapper.lib 以及 libcef.lib 拷贝到新项目的 lib 目录下。

• 将 cefsimple 项目文件添加到.pro 文件所在的路径下。

  
  
  

• 打开.pro 文件，引入所需文件及路径。（红框框起来的部分都是必须要添加的）

  
  
  

• 因为项目的路径改变了，需要将代码中所有的 #include "cefsimple/simple_handler.h"替换为 #include "simple_handler.h"。

• 将 VS 打开的 cefsimple 项目中的 cefsimple_win.cc 文件里面的 wWinMain 函数中的内容复制到 CefBrowserDemo 的 main.cpp 的 main 函数中，并稍作修改。

  
  
  

这里去掉了有关 cef_sandbox 的相关内容。因为 Qt Creator 只支持动态库，而 cef 自带的 cef_sandbox.lib 是静态库，所以不能兼容。

• 还要将 cefsimple demo 运行目录下的文件拷贝到 CefBroserDemo 的运行路径下，除了 cefsimple 文件外，其余全部拷贝在 QtWidgetCef 的生成目录下。

这是 cefsimple demo 运行目录：

这是复制后的 CefBroserDemo 的运行目录：

至此，CefBroserDemo 就可以编译运行成功了。

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。