统信系统CEF项目研发环境构建_cef 统信

目录

一、CEF介绍

二、CEF开发配置

2.1 环境安装

2.1.1 cmake安装

2.2 CEF编译

三、开发实例

3.1 新建目录

3.2 编辑CMakeLists.txt文件

3.3 cmake文件拷贝

3.4 子项目说明

---

一、CEF介绍

   Chromium Embedded Framework (CEF). 用于将基于 Chromium 的浏览器嵌入其他应用程序的简单框架。CEF是一个BSD许可的开源项目，由Marshall Greenblatt于2008年创立，基于Google Chromium项目。与 Chromium 项目本身主要专注于 Google Chrome 应用程序开发不同，CEF 专注于促进第三方应用程序中的嵌入式浏览器用例。CEF 通过提供生产质量稳定的 API、跟踪特定 Chromium 版本的发行分支和二进制发行版，使用户免受底层 Chromium 和 Blink 代码复杂性的影响。CEF 中的大多数功能都有默认实现，这些实现提供了丰富的功能，同时几乎不需要用户进行集成工作。目前，全球已安装超过 1 亿个 CEF 实例，嵌入来自众多公司和行业的产品中。使用 CEF 的公司和产品的部分列表可在CEF 维基百科页面上找到。CEF 的一些用例包括：

        在现有本机应用程序中嵌入符合 HTML5 的 Web 浏览器控件。

        创建一个轻量级本机“shell”应用程序，该应用程序托管主要使用 Web 技术开发的用户界面。

        在具有自己的自定义绘图框架的应用程序中“离屏”渲染 Web 内容。

        充当现有 Web 属性和应用程序的自动测试主机。

        CEF 支持多种编程语言和操作系统，并且可以轻松集成到新的和现有的应用程序中。它的设计从头开始就考虑到了性能和易用性。基本框架包括通过本机库公开的 C 和 C++ 编程接口，使主机应用程序与 Chromium 和 Blink 实现细节隔离。它提供浏览器和主机应用程序之间的紧密集成，包括对自定义插件、协议、JavaScript 对象和 JavaScript 扩展的支持。主机应用程序可以选择控制资源加载、导航、上下文菜单、打印等，同时利用 Google Chrome Web 浏览器中提供的相同性能和 HTML5 技术。

二、CEF开发配置

2.1 环境安装

2.1.1 cmake安装

cmake需要3.19以上版本，因此需要下载并配置cmake编译环境，操作步骤如下：

第一步：下载代码

浏览器中输入，网址：https://cmake.org/download/，选中linux平台的cmake代码

第二步：编译cmake

解压压缩包，命令如下：

tar -zxvf cmake-3.27.6.tar.gz

编译

cd cmake-3.27.6
 
./configure
 
make -j$(nproc)

第三步：配置

配置命令如下：

在cmake-3.27.6目录中输入pwd命令获取当前目录地址，假设为：/home/uos/downlowd/cmake-3.27.6。

在～/.bashrc的底部添加以下代码保存。

export PATH=/home/uos/downlowd/cmake-3.27.6/bin:$PATH

刷新环境变量

source ~/.bashrc

验证版本是否被更新

cmake --version

2.2 CEF编译

第一步：下载源文件

在浏览器中输入网址：https://cef-builds.spotifycdn.com/index.html#linux64

第二步：编译CEF项目

安装编译依赖

sudo apt-get install doxygen

解压包下载包cef_binary_xxxx_linux64.tar.bz2后在文件中，执行编译命令。

mkdir build
 
cd build
 
cmake -G "Unix Makefiles" -DCMAKE_BUILD_TYPE=Debug ..
 
make -j$(nproc)

第三步：运行demo

在build目录中执行以下命令:

cd tests/cefsimple/Debug
 
sudo chmod 4755 chrome-sandbox
 
sudo chown root:root chrome-sandbox
 
./cefsimple

执行结果如下：

三、开发实例

        已经编译好了CEF的开发环境，我们可以使用他的开发环境快速的构建自己的项目进行开发。

3.1 新建目录

新建文件夹结构如下：

mkdir cefmy
 
mkdir cefmy/cmke
 
mkdir cefmy/mytarget

3.2 编辑CMakeLists.txt文件

顶层CMakeLists.txt文件将2.2中cef_binary_xxx目录中的顶层CMakelists.txt拷贝到cefmy目录下。

修改CMakeLists.txt内容，修改CEF_ROOT的值，需要将CEF_ROOT值指向已经编译好的cef库，因此将

set(CEF_ROOT "${CMAKE_CURRENT_SOURCE_DIR}")

修改为：

set(CEF_ROOT "/home/uos/download/cef_binary_xxxxx")

/home/uos/download/cef_binary_xxxxx：为具体的cef_binary编译的路径。

在add_subdirectory(${CEF_LIBCEF_DLL_WRAPPER_PATH} libcef_dll_wrapper)下面添加一下代码，用于添加子项目。

add_subdirectory(mytarget)

3.3 cmake文件拷贝

将cef_binary_xxxxx/cmake/FindCEF.cmake拷贝到cmake目录中

3.4 子项目说明

将cef_binary_xxxxx/tests/cefsimple目录中的内容拷贝到cefmy/mytarget目录中。

修改cefmy/mytarget/CMakeLists.txt

set(CEF_TARGET "cefsimple")

为

set(CEF_TARGET "cefmy")

修改cefmy/mytarget/*.cc以及cefmy/mytarget/*.h文件中的头文件引用目录，即文件中test/cefsimple都删除。

修改cefmy/mytarget/simple_app.cc文件中http://www.google.com修改为https://www.baidu.com

编译
在cefmy目录下执行以下命令

mkdir build
 
cd build
 
cmake -G "Unix Makefiles" -DCMAKE_BUILD_TYPE=Debug ..
 
make -j$(nproc)

运行

cd mytarget/Debug/
 
sudo chown root:root chrome-sandbox
 
sudo chmod 4755 chrome-sandbox
 
./cefmy

运行结果如下：

应用目录说明

​