关键词:
文章目录
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使用•跨域请求... 查看详情