菜鸟与 cef 的邂逅之旅(一):cef 源码获取与编译

版权声明:本文为博主原创文章,未经博主允许不得转载哦 (ÒωÓױ) https://blog.csdn.net/u012814856/article/details/76263059

一、引言

最近工作中涉及到了有关嵌入浏览器控件的任务,并且要求支持 H5。之前使用了 wke,但是发现其对于 H5 的支持不够好,因此只能选择“闻名已久”的 cef。

cef 是什么呢:

CEF 全称 Chromium Embedded Framework, 是一个基于 Google Chromium 的开源项目。 Google Chromium 项目主要是为 Google Chrome 应用开发的,而 CEF 的目标则是为第三方应用提供可嵌入浏览器支持。 CEF 隔离底层 Chromium 和 Blink 的复杂代码,并提供一套产品级稳定的 API,发布跟踪具体 Chromium 版本的分支,以及二进制包。 CEF 的大部分特性都提供了丰富的默认实现,让使用者做尽量少的定制即可满足需求。

ps: 以上引用自 CEF General Usage 中文版

如果你是一个小白,在网上林林总总中的 cef 博客、资源中迷茫惘然,迫切希望找一个靠谱的道路获取到 cef 的源代码并且能够编译运行,那么恭喜你,这篇博客适合你(毕竟我也是一个菜鸟,折腾了好久好久才成功编译运行了 cef 的源代码 T_T)。

在此之前,我希望你能够看一看 cef 的有关资料,大体了解下 cef 的有关信息。网上的资料太过于繁杂,这里我只推荐一个网址,这个网址搜集了一些 cef 相关的资源网址,只需要访问这个网址即可了解 cef 的重要资料:

fanfeilong/cefutil cef 文档资料合集

官方文档是英文版的,当然也有中文版翻译,你可以点开上述链接之后点击 CEF General Usage中文版,欢迎查阅 进行访问。

说了这么多,接下来让我们开始吧!

二、cef 源码获取

cef 的源代码因为某种众所周知的原因,国内很难成功下载下来,需要非常高超的姿势才能够成功获取。

不过,幸而我加入了一个大神群,里面有位仁兄提供了 cef 的源码,这里贴出我的百度云链接方便大家获取:

获取 cef 源码(百度云) 密码 ady8

大家点击上述链接,下载即可,大概 100 多 MB。

三、CMake 下载安装

这里想要编译我们的 cef 源代码,还需要一个给力的工具:CMake。

CMake 又是什么呢:

CMake 是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程)。他能够输出各种各样的 makefile 或者 project 文件,能测试编译器所支持的 C++ 特性,类似 UNIX 下的 automake。

这里,我们可以使用 CMake 直接编译生成我们 Windows 平台下的 Visual Studio 解决方案文件,之后就可以使用我们熟悉的 Visual Studio 来打开解决方案进行编译了。

CMake 下载地址:

获取 CMake

其中,选择如图链接进行下载即可(CMake 的安装文件,如果有兴趣可以点击上面的链接查看 CMake 的源代码)

Get CMake

下载完成之后,默认安装即可。

四、使用 CMake 编译 cef

此时,万事俱备只欠东风,我们可以开始干活了!

解压我们的 cef 源代码,可以看到如下的目录结构:

cef diretory

此时,我们看到了 CMakeLists.txt 文件,这个文件就是 CMake 用来编译 cef 的配置文件。

想要具体了解 CMake 的原理的同学可以点击这个链接进行学习:

CMake入门教程

这个教程里面会手把手教你写一个项目并且使用 CMake 编译出一个 Visual Studio 的解决方案文件。这个例子走一遍之后,你或许会对 CMake 有更加深刻的了解。

这里扯远了,其实这里你不了解 CMake 的工作原理也没事,因为我们有 CMake 的 GUI 工具帮助我们:

CMake

打开我们的 CMake 的 GUI 工具,注意这里有两个目录,接下来分别对这两个目录进行解释:

  1. Where is the source code: 这一个目录中填入我们解压出来的 cef 源码的本地路径

  2. Where to build the binaries: 这一个目录填入我们想要建立的 cef 项目的本地路径(这里我新建了一个文件夹 cef,用来装载编译好的 cef 项目)

然后我们点击 Configure 按钮:

configure

这里,点击了 configure 之后会让你配置编译器,这里我本机安装的是 Visual Studio 2017,自然就选择了该项(最后也就生成 Visual Studio 2017 的解决方案)。

这里我们会看到 configure done 字样:

configure done

红色的框不用理会,之后我们再点击 Generate 按钮:

generate

此时,我们看到了 generate done 的字样,证明我们的项目已经编译好了。

此时,我们可以打开我们刚才新建的文件夹 cef 中,点击 cef.sln 打开解决方案了。

五、编译运行 cef

这里,我们点击 生成解决方案,编译过程中可能会出现杀毒软件的提示信息,一定要及时选择通过。

顺利的话,这里应该是成功编译不出任何差错的。

在这个项目中,有两个项目可以运行,一个是 cefclient,这是官方文档中推荐学习和使用的项目,是使用 cef 生成一个新的项目最需要借鉴的项目;另一个是 cefsimple,这个项目仅仅弹出一个网页,并且写死了访问地址,如果想要运行它,必须修改一下里面的默认网址(默认为 www.google.com 国内无法访问):

// simple_app.cc
...
if (url.empty())
    url = "http://www.baidu.com";
...

看看运行的效果吧:

cefsimple:
cefsimple

cefclient:
cefclient

大功告成!

完结!撒花! ^_^

六、总结

cef 的学习主要还是要看官方文档的,这一点上,我也在路上。

刚开始想要找 cef 源码时,花了不少的时间,找了不少 demo 基本没有直接到手就可以成功编译运行的。于是我就悉心下来看官方文档,之后再在几篇博客的帮助下,接触并且学习了 CMake,再之后在一个群里方便的获得了 cef 的源码,最后成功编译运行也就是顺利成章的事了。

这段时间会一直研究 cef:

To be Stronger!

猜你喜欢

转载自blog.csdn.net/u012814856/article/details/76263059
CEF