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

关键词：

文章目录

• • • 1、什么是CEF
    • 2、测测你电脑里的CEF
    • 3、从0开始的CEF入门实例

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

怎么将网页打包成桌面应用（web前端页面

在HTML5的崛起、JavaScript要一统天下之际，有一个名为【跨平台】的技术越来越火。为什么会这么火？因为软件开发者只需一次编写程序，即可在Windows、Linux、Mac、IOS、Android等平台运行，大大降低了程序员的工作量，也使公司的... 查看详情

electron使用electron将web项目打包成桌面应用程序(代码片段)

...;Electron是由GitHub开发，使用JavaScript，HTML和CSS构建跨平台的桌面应用程序，可以帮我们把web网页项目直接打包成桌面应用程序。一、所需环境&打包前准备1、 查看详情

前端打包成桌面应用以及chrome扩展

    前段时间在利用工作之余开发了tomatotimer这个蕃茄钟，然后部署到github.io上，由于greatway太厉害，偶尔会有打不开的情况。上周末对比做了扩展和改进，使其成为chrome的插件，或者成为桌面app。chrome插件的使用... 查看详情

前端性能优化之gzip

...器就将我们的网页文件进行压缩，将压缩后的文件传输到客户端，对于纯文本文件我们可以至少压缩到原大小的40%，这样大大提高了传输效率，页面便可更快的加载出来。由于目前我们项目是使用ngxin来部署前端的，nginx自带HttpG... 查看详情

web前端之javascript详解20180330

...远程的浏览器解释))，它可以做的就是信息的动态交互2.跨平台性(只要可以解释JS的浏览器都可以执行，和平台(系统)无关),java被虚拟机解析所以也不需要依赖平台。 二、javascript与Java不同1.JS是Netscape公司的产品，Java早期是SUN... 查看详情

客户端嵌套web页面如何选择(代码片段)

...k[5]现在国内众多桌面程序都是用了以下五种，因为它跨平台更为方便👇。以下推荐使用几种C#方案客户端嵌套WEB页面的方案：C 查看详情

前端打包,怎么只替换修改的文件,而不是整个项目替换？

参考技术Ajavaweb中的java文件会在服务器中生成class文件，比如tomcat目录下的webapps目录下，放你的javaweb项目，在项目中有个web-inf目录，里面有一个classes文件夹，里面放的都是对源码进行编译后生成的.class文件 参考技术B使用打包... 查看详情

前端性能优化之----静态文件客户端离线缓存_20191110(代码片段)

前端性能优化之----静态文件客户端离线缓存1.前言上次的文章给大家分享了怎么在webpack打包阶段去将自己的项目优化到极致。文章链接：将webpack打包优化到极致_201806192.探究业务的瓶颈H5页面的性能瓶颈，网络因素几乎... 查看详情

浅谈基于web的跨平台桌面应用开发

近些年来，跨平台跨端一直是比较热门的话题，因为跨平台方案的优势十分明显。对于开发者而言，可以做到一次开发，多端复用，一套代码就能够运行在不同设备上，今天我们聊聊桌面应用开发。作者：京东物流王泽知近些年... 查看详情

跨平台应用开发进阶(三十七)uni-app前端监控方案sentry探究(代码片段)

文章目录一、前言二、Sentry简介三、Sentry部署3.1docker的部署(mac版)3.2部署sentry3.3创建项目3.4前端部署，注入监控代码四、sentry操作界面介绍五、拓展阅读一、前言在日益发达的网络时代，web应用也是越来越复杂，尤其... 查看详情

web前端的跨平台解决方案，你了解吗？

H5+原生混合开发这种模式又称为Hybrid开发，现在很多App都用这种模式去开发，常见的有微信、淘宝、美团、爱奇艺等知名移动应用等。国内也有很多公司使用Hybrid模式去开发平台，供开发者使用，像Dcloud、AppCan... 查看详情

跨桌面端之组件化实践

...富，mac千牛什么时候可以把能力对齐？相信所有跨平台应用ÿ 查看详情

electron替代方案，rust跨平台gui框架tauri之helloworld

参考技术Atauri是一个新兴的跨平台GUI框架。与electron的基本思想相似，tauri的前端实现也是基于html系列语言。tauri的后端使用rust。官方形容，tauri可以创建体积更小、运行更快、更加安全的跨平台桌面应用。详细的介绍可以自行... 查看详情

vue前端打包更新后客户端自动更新

vue单页面网页端 项目前言（缓存）项目之前已经通过webpack打包的时候都会把静态资源文件名加个哈希后缀，且index.html中引入的时候也加了相应的哈希后缀，这样每次打包都会是最新的，index.html文件也通过Ngi... 查看详情

浅谈基于web的跨平台桌面应用开发

作者：京东物流王泽知近些年来，跨平台跨端一直是比较热门的话题，Writeonce,runanywhere，一直是我们开发者所期望的，跨平台方案的优势十分明显，对于开发者而言，可以做到一次开发，多端复用，一套代码就能够运行在不同设... 查看详情

管理具有差异的跨平台项目的存储库

】管理具有差异的跨平台项目的存储库【英文标题】：Managerepositoryforcross-platformprojectwithdifference【发布时间】：2021-11-1421:21:54【问题描述】：我必须从事在桌面、移动设备和网络上运行的跨平台项目。问题是Web应用程序和桌面/... 查看详情

electron打包react构建桌面应用(代码片段)

...行。 在目前浏览器和移动端盛行的互联网环境下，跨平台的桌面应用开发，也为前端提供了一个新分支方向。二、搭建准备1、检查git和node是否安装完成git--versionnode- 查看详情

零基础，如何自学前端？

...速开发•jQuery插件开发第三阶段：核心知识点•能够建立客户端服务器交互模型，熟悉网络通信相关概念•能够使用Node.js进行Web服务端开发••基于Node.js开发Web应用•Express•RESTFulAPI•原声AJAX、jQuery的AJAX相关API使用•跨域请求... 查看详情