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。
    右键点击生成即可
    在这里插入图片描述
    在这里插入图片描述
    然后就可以在对应的目录中找到运行程序
    在这里插入图片描述
    在这里插入图片描述

目录
相关文章
|
17天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
30 3
|
14天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
17天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
18天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
17 3
|
18天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
33 2
|
19天前
|
开发框架 前端开发 JavaScript
Web前端框架
Web前端框架等名词
16 2
|
19天前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
36 0
|
1月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
101 3
|
17天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
103 45
|
12天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
28 1