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

目录
相关文章
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
1334 1
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
809 70
|
JavaScript 前端开发 API
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
1759 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
925 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
721 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
616 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
328 9
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1710 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
1126 0