Web前端项目的跨平台桌面客户端打包方案之——CEF框架

简介: Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件,旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性,提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台,不仅限于 C/C++ 接口,还支持多种语言。CEF 功能强大,性能优异,广泛应用于桌面端开发,如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权,商业友好,装机量已超 1 亿。此外,GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF

@[toc]

1、什么是CEF

CEF是什么

  • 概念
    Chromium Embedded Framework (CEF)是个基于Google Chromium项目的开源Web browser控件。
    CEF的目标是为第三方应用提供可嵌入浏览器支持。CEF隔离底层Chromium和Blink的复杂代码,并提供一套产品级稳定的API。

  • Web前端的发展方向
    1、分工:有些人去搞 React、Vue,有些人就去搞 Rollup、Webpack。
    2、溢出:有些人用前端技术搞后端(Node.js、Deno),有些人用前端技术搞桌面端(Electron、CEF),还有些人用前端技术搞人工智能(TensorFlow.js) 。

CEF的特点:

  • 跨平台, 跨语言
    CEF支持Windows, Linux, Mac平台。除了提供C/C++接口外,也有其他语言的移植版。

  • 功能多,性能强
    因为基于Chromium,所以CEF支持Webkit & Chrome中实现的HTML5的特性,并且在性能上面,也比较接近Chrome。

  • 开源可靠
    它是一个开源项目,且采用的是 BSD 授权协议,商业授权非常友好。
    所以很多大厂都选择 CEF 作为桌面端开发框架。

  • 很多人用
    据 CEF 官网数据,CEF 框架装机量超过 1 亿。
    QQ 桌面端、微信桌面端、网易云音乐桌面端、 MATLAB 、 FoxMail 、OBS Studio 等。

2、测测你电脑里的CEF

最近很火的一个Github项目:CefDetector
Mac版本参考SafariYYDS

  • 首先需要安装 完整版Everything 并完成全硬盘的扫描.
  • 然后解压后运行 CefDetector.exe,即可检测你电脑里哪些程序使用了CEF
  • 绿色文件名表示当前正在运行的CEF程序。

如题:

  • 你的电脑就是你的垃圾桶,你所热爱的
    在这里插入图片描述

3、从0开始的CEF入门实例

CEF只是一个标准,有很多相关的框架

  • 包括但不限于libcef、Electron、NWJS、CefSharp、Edge 和 Chrome
  • CEF则比较单纯,只对Chromium做了精简和封装,允许开发者通过C++代码控制Chromium核心,允许JavaScript和C++互操作。
  • 还有二次打包的,比如像访问托盘图标、访问剪切板、Socket通信、读写文件这类事情,它都没做。所以Electron为他们做了这些事情,而且做的很好。

这里我们以较为纯原生的libcef为例:

  • libcef下载:spotifycdn
    在这里插入图片描述
  • VS2022打开目录
    cmake:配置和构建以Windows作为编译环境的cmake配置文件。
    Debug和Release:已经编译好的CEF核心库文件
    include:libcef本身提供的头文件以及wrapper会使用到的头文件。
    libcef_dll:存放了libcef_dll_wrapper源码。
    Resources:CEF作为内核的浏览器运行时需要用到的资源文件。
    tests:存放了利用libcef、以及wrapper作为库来编写的浏览器Demo。其中,cefsimple编译出来的是一个简单的浏览器,而cefclient编译出来的是一个展示了cef许多API功能的exe。
    在这里插入图片描述
  • 使用cmake进行配置构建
    安装cmake-gui
    选择源码位置和cmake编译后的程序的存放位置
    在这里插入图片描述
    Configure选择配置并进行构建
    在这里插入图片描述
    最后Generate一下
    在这里插入图片描述

  • 使用VS2022编译测试用例,打开构建生成的cef.sln项目
    文件夹里面的内容如下:

    ALL_BUILD与ZERO_CHECK:cmake自动生成的辅助工程。
    cef_gtest与ceftests:都是测试模块
    cefclient:一个包含CEF各种API演示的浏览器程序Demo
    cefsimple:一个简单的CEF浏览器程序Demo
    libcef_dll_wrapper:对libcef库的C++代码封装。上述cefclient与cefsimple都会用它。
    在这里插入图片描述
    在这里插入图片描述

  • 编译运行程序:
    首先编译libcef_dll_wrapper,然后编译cefclient和cefsimple。
    右键点击生成即可
    在这里插入图片描述
    在这里插入图片描述
    然后就可以在对应的目录中找到运行程序
    在这里插入图片描述
    在这里插入图片描述

目录
相关文章
|
3天前
|
SQL 安全 PHP
PHP 自发布以来一直在 Web 开发领域占据重要地位,PHP 8 更是带来了属性、刚性类型等新特性。
【10月更文挑战第1天】PHP 自问世以来,凭借其易用性和灵活性,在 Web 开发领域迅速崛起。从简单的网页脚本语言逐步演进为支持面向对象编程的现代语言,尤其自 PHP 5.3 引入命名空间后,代码组织和维护变得更加高效。PHP 7 的性能优化和 PHP 8 的新特性(如属性和刚性类型)进一步巩固了其地位。框架如 Laravel、Symfony、Yii2 和 CodeIgniter 等简化了开发流程,提高了效率和安全性。
21 2
|
14小时前
|
设计模式 JavaScript 前端开发
浅谈JavaScript 框架在现代 Web 开发中的作用
浅谈JavaScript 框架在现代 Web 开发中的作用
18 12
|
3天前
|
缓存 前端开发 JavaScript
前端技术趋势:探索现代Web开发的新领域
【10月更文挑战第1天】前端技术趋势:探索现代Web开发的新领域
15 4
|
3天前
|
前端开发 JavaScript API
前端开发趋势与实践:拥抱Web Components
前端开发趋势与实践:拥抱Web Components
15 4
|
18小时前
|
存储 SQL 数据库
使用Python和Flask框架创建Web应用
【10月更文挑战第3天】使用Python和Flask框架创建Web应用
10 1
|
3天前
|
前端开发 JavaScript Go
前端开发趋势:从响应式设计到Web组件的探索
【10月更文挑战第1天】前端开发趋势:从响应式设计到Web组件的探索
11 3
|
1天前
|
前端开发 Java API
JAVA Web 服务及底层框架原理
【10月更文挑战第1天】Java Web 服务是基于 Java 编程语言用于开发分布式网络应用程序的一种技术。它通常运行在 Web 服务器上,并通过 HTTP 协议与客户端进行通信。
9 1
|
2天前
|
开发框架 前端开发 数据库
使用Django框架构建一个完整的Web应用
【10月更文挑战第2天】使用Django框架构建一个完整的Web应用
10 1
|
3天前
|
前端开发 JavaScript 安全
前端开发趋势与实践:构建现代Web应用的探索
【10月更文挑战第1天】前端开发趋势与实践:构建现代Web应用的探索
11 2
|
3天前
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。