大家好，我是Echa。

好消息，2023年4月4号 跨平台桌面应用开发工具 Electron 官方宣布 Electron 24.0.0 版本正式发布。距离上一个版本 Electron 23.0.0 版本（2023年2月7号），短短才56天时间。Electron 研发团队这研发速度惊人。一转眼 Electron 陪伴了大家十年了多时间，有兴趣可以看看小编之前发的 Electron 十年的发展史，记录了Electron 点点滴滴。作为一个跨平台桌面应用开发工具，发展到现在真心不容易。

这次 Electron 24.0.0 版本 包括了对 Chromium 112.0.5615.49、V8 11.2 和 Node.js 18.14.0 的升级和兼容。可以通过以下 npm 命令来安装该版本：

npm install electron@latest

如下图：

今天小编带领大家详细了解 Electron 以及最新版更新内容。

全文大纲

1. Electron 前身
2. Electron 介绍
3. Electron 的原理
4. Electron 的价值
5. Electron 部署搭建
6. Electron 优缺点
7. Electron 24.0.0 版本更新内容

Electron 前身

Electron 最初由赵成和 GitHub 的工程师于 2013 年4月创建，当时名字为 Atom Shell，用来服务于 GitHub 的开发工具 Atom，2014 年5月开源，2015 年4月才正式更名为 Electron。目前 gitHub 公司内部仍有一个团队在维护这个开源项目，且社区内也有很多的贡献者。
Electron 更新非常频繁，平均一到两周就会有新版本发布，Issue 和 Pull request 的回复也非常及时，一般关系到应用崩溃的问题（Crash Issue）一两天就能得到回复，普通问题一周内也会有人跟进。社区活跃程度由此可见一斑。

Electron 原作者 赵成

发起者是中国人

与 Electron 类似的另外一个框架是 NW.js，它们都是用 Web 前端技术来开发桌面 GUI 程序。

Electron VS NW.js

Electron 前身是atomshell，NW.js 前身是Node-webkit。区别：

• 程序入口

NW.js 以网页为入口，Electron 以js 为入口，Electron 更加灵活。例如可以开发纯菜单应用。

• 编译系统

Electron 使用 libchromiumcontent，比NW.js 编译应用的时候，省去编译整个 Chromium （编译Chromium 非常费时）。

• Node 集成

NW.js 的 Node 集成需要给 Chromium 打补丁才能工作。Electron 通过集成 libuv loop 和 平台的 message loop 避免给 Chromium 打补丁。

• Multi-context

NW.js 创造了 Node context 和 web context 的概念，而 Electron 没有引入新的 context，而是直接使用 Node 的 Multi-context 特性（这一特性是 Atom 开发者赞助 Node 添加的）。

• Electron 不支持XP

这两个框架都与中国人有极深的渊源，2011 年左右，中国英特尔开源技术中心的王文睿（Roger Wang）希望能用 Node.js 来操作 WebKit，而创建了 node-webkit 项目，这就是 NW.js 的前身，但当时的目的并不是用来开发桌面 GUI 应用。

中国英特尔开源技术中心大力支持了这个项目，不仅允许王文睿分出一部分精力来做这个开源项目，还给了他招聘名额，允许他招聘其他工程师来一起完成

2012 年，故事的另一个主角赵成（Cheng Zhao）加入王文睿的小组，并对 node-webkit 项目做出了大量的改进。
后来赵成离开了中国英特尔开源技术中心，帮助 GitHub 团队尝试把 node-webkit 应用到 Atom 编辑器上，但由于当时 node-webkit 并不稳定，且 node-webkit 项目的走向也不受赵成的控制，这个尝试最终以失败告终。
但赵成和 GitHub 团队并没有放弃，而是着手开发另一个类似 node-webkit 的项目——Atom Shell，这个项目就是 Electron 的前身。赵成在这个项目上倾注了大量的心血，这也是这个项目后来广受欢迎的关键因素之一。再后来 GitHub 把这个项目开源出来，最终更名为 Electron。
你可能从没听说过这两个人的名字，但开源界就是有这么一批“英雄”，他们不为名利而来，甘做软件行业发展的铺路石，值得这个领域的所有从业者尊敬。

现如今赵成好像已经不再负责Electron项目的管理工作了。而是交棒给了一个小姐姐了，就是这张照片里的C位女孩儿：Shelley（codebytere）。

Electron 研发团队

这个女孩儿也厉害的很，在做Electron开发工作的同时，还是nodeJS、tc39和openjs-foundation的成员。不过小编个人感觉她对待开发者，提的Issue和PR比较草率，没有赵成认真。

Electron 介绍

官网：https://www.electronjs.org/

Github：https://github.com/electron/electron

基于chrome 内核 nodeJS 服务 HTML5 展现来开发的桌面软件，可以轻易的跨平台。例如Visual Studio Code、Slack 、Atom 等等桌面端软件都是使用Electron 开发的。

如下图：

桌面应用软件都是使用Electron 开发的

Chromium Nodejs Native apis=Electron

Chromium : 为Electron提供了强大的UI能力，可以不考虑兼容性的情况下，利用强大的Web生态来开发界面。electron本质上就是chromium（chrome开源版本）浏览器，最新的东西都会在chromium测试，所以electron可以体验最新的api，这也是好处之一）

Chromium 多进程架构图

如果想开发一个桌面 GUI 应用软件，希望其能同时在 Windows、Linux 和 Mac 平台上运行，可选的技术框架并不多，在早期人们主要使用以下三个框架来完成这类工作：

• wxWidgets：https://www.wxwidgets.org
• GTK：https://www.gtk.org
• Qt：https://www.qt.io

这三个框架都是用 C/C 语言开发的，受语言开发效率的限制，开发者想通过它们快速地完成桌面应用的开发工作十分困难。
近几年相继出现了针对这些框架的现代编程语言绑定库，诸如 Python、C#、Go 等，大部分都是开源社区提供的，但由于历史原因，要想用到这些框架的全部特性，还是需要编写 C/C 代码。并且由于几乎没有高质量的 Node.js 的绑定库，前端程序员想通过这三个框架开发桌面应用更是难上加难。
Stack Overflow 的联合创始人 Jeff Atwood 曾经说过，凡能用 JavaScript 实现的，注定会被用 JavaScript 实现。桌面 GUI 应用也不例外，近几年两个重量级框架 NW.js和 Electron横空出世，给前端开发人员打开了这个领域的大门。

electron 其实就是个壳子，一个可以展示网页内容的壳子，相当于一个独立的浏览器，而这个浏览器可以提供给你一些接口，去调用系统的资源。

一般在浏览器中网页是没有权限去调用系统资源的，本地文件都无法自主获取，只能通过用户操作喂给浏览器才行。

有了 electron 就自由了，可以调用 electron 提供的一些系统功能，所有 nodejs 中可以使用的功能都可以。

你看到的 electron 程序内的界面全是 HTML css 搭建的，并不是原生系统的界面。

electron 的一个很大的优势是可以做到一套代码通吃各平台，因为它的核心逻辑是 js 写的，只需要给不同平台的应用套上一个对应的外壳即可。

如下图：

Electron 官网

Electron 的原理

Electron 是一个集成项目，它做了如下几个重要的工作：

• 订制 Chromium，并把订制版本的 Chromium 集成在 Electron 内部
• 订制 Node.js，并把订制版本的 Node.js 集成在 Electron 内部
• 通过消息轮询机制打通 Node.js 和 Chromium 的消息循环
• 通过 Electron 的内置模块向开发者提供桌面应用开发必备的 API

Electron 框架的内部原理图如下所示：

Electron 架构

其中 Chromium 基础能力 API 可以让应用渲染开发者提供的 HTML 页面，让应用可以在 Cookie 或 IndexedDB 中存取数据，前端开发者都非常熟悉这些能力。

Node.js 基础能力 API 可以让开发者读写本地磁盘的文件、通过 socket 访问网络、创建和控制子进程等，Node.js 开发者非常熟悉这些能力。

Electron 内置模块可以让开发者创建操作系统的托盘图标、访问操作系统的剪切板、发送系统通知，同时它还提供了一系列的 API，允许开发者使用 JavaScript 访问 Chromium 的底层能力。

下面我们来看一下 Electron 应用的结构：

Electron 应用的结构

Electron 的价值

Electron 和 NW.js 框架都是基于 Chromium 和 Node.js 实现的，即使你是前端程序员可以使用 JavaScript、HTML 和 CSS 知识轻松构建跨平台的桌面应用。

传统桌面应用开发的难点，现在看来也变得异常容易，比如绘制漂亮的界面可以使用更灵活的 HTML 和 CSS 提供的能力、实现简单的动效可以用 CSS Animations 或 Web Animations API 来实现。

为了弥补 Node.js 和前端技术访问系统 API 方面的不足，这两个框架内部都对系统 API 做了封装，比如：系统对话框、系统托盘、系统菜单、剪切板等。开发者基于 Electron 开发应用时，可以直接使用 JavaScript 访问这些 API。其他诸如网络访问控制、本地文件系统的访问控制则由 Node.js 提供支持。这样开发者就可以使用前端技术开发绝大多数桌面应用的需求了。

直接看Electron 下载量就清楚了它的价值：

Electron 下载量

前端技术是现如今软件开发领域应用最广泛的技术之一。入门门槛非常低、周边生态繁荣而且历史悠久。相对于基于 C 库开发桌面软件来说，基于 Electron 开发更容易上手且开发效率更高。由于 JavaScript 语言是一门解释执行的语言，所以 C 语言固有的各种问题都不再是问题，比如：C 没有垃圾回收机制，开发人员要小心翼翼的控制内存，以免造成内存泄露。C 语言特性繁多且复杂，学习难度曲线陡峭，需要针对不同平台进行编译，应用分发困难等，使用 Electron 开发桌面应用就不用担心这些问题。

执行效率上，如果前端代码写的足够优秀，完全可以做到与 C 应用相媲美的用户体验，Visual Studio Code 就是先例。另外 Node.js 本身也可以很方便的调用 C 扩展，Electron 应用内又包含 Node.js 环境，对于一些音视频编解码或图形图像处理需求，可以使用 Node.js 的 C 扩展来完成。

随着几十年 Web 应用大行其道，Web 前端开发领域的技术生态足够繁荣。Electron 可以使用几乎所有的 Web 前端生态领域及 Node.js 生态领域的组件和技术方案。目前发布到 npmjs.com 平台上的模块已经超过 90 万个，覆盖领域广、优秀模块繁多且使用非常简单方便。

但由于 Electron 内置了 Chromium 浏览器，该浏览器对标准支持非常好，甚至有些标准尚未通过，Chromium 浏览器就已经支持了，所以基于 Electron 开发应用不会遇到这些问题。开发者的自由度得到了最大程度的保护，你几乎可以在 Electron 中使用所有 HTML5、CSS3 、ES6 标准中定义的 API。

Electron 部署搭建

所需的基础文件

基础的环境搭建只需要四个文件，分别是

https://github.com/electron/electron-quick-start

.├── app.js├── index.html├── preload.js└── package.json

package.json-指向应用程序的主文件并列出其详细信息和依赖项。

app.js-启动应用程序并创建一个浏览器窗口来渲染HTML。这是应用程序的主要流程。

index.html-要呈现的网页。这是应用程序的渲染过程。

preload.js-一个在渲染器进程加载之前运行的内容脚本。

# Clone this repositorygit clone https://github.com/electron/electron-quick-start# Go into the repositorycd electron-quick-start# Install dependenciesnpm install# Run the appnpm start

package.json

package.json 中只需要在 devDependencies 标签中添加 electron 即可。

字段 main 指定程序的入口 js 文件，也就是上面的 app.js，

这个名字自己随便定， main.js 也行，对应上就可以。

electron 的版本号不一定非是这个，用最新的就好了。这个是我写教程时的最新版本。

{ "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "app.js", "scripts": { "start": "electron ." }, "repository": "https://github.com/electron/electron-quick-start", "keywords": [ "Electron", "quick", "start", "tutorial", "demo" ], "author": "GitHub", "license": "CC0-1.0", "devDependencies": { "electron": "^23.2.1" }}

app.js

这是程序的入口文件，electron 的主进程就是这个。里面是关于 electron app 的一些生命周期方法

var app = require('app'); // 控制应用生命周期的模块。var BrowserWindow = require('browser-window'); // 创建原生浏览器窗口的模块// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，// window 会被自动地关闭var mainWindow = null;// 当所有窗口被关闭了，退出。app.on('window-all-closed', function() { // 在 OS X 上，通常用户在明确地按下 Cmd Q 之前 // 应用会保持活动状态 if (process.platform != 'darwin') { app.quit(); }});// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候// 这个方法就被调用app.on('ready', function() { // 创建浏览器窗口。 mainWindow = new BrowserWindow({width: 800, height: 600}); // 加载应用的 index.html mainWindow.loadURL('file://' __dirname '/index.html'); // 打开开发工具 mainWindow.openDevTools(); // 当 window 被关闭，这个事件会被发出 mainWindow.on('closed', function() { // 取消引用 window 对象，如果你的应用支持多窗口的话， // 通常会把多个 window 对象存放在一个数组里面， // 但这次不是。 mainWindow = null; });});

最后，你想展示的 index.html

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"> <link href="./styles.css" rel="stylesheet"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> We are using Node.js <span id="node-version"></span>, Chromium <span id="chrome-version"></span>, and Electron <span id="electron-version"></span>. <!-- You can also require other files to run in this process --> <script src="./renderer.js"></script> </body></html>

预览效果如下：

Electron Demo

Electron 优缺点

• 原生的接口（菜单、消息提醒、系统托盘等）。
• 上手难度低。能够使用react、vue等前端框架，能方便地迁移前端组件，构建出漂亮的桌面应用。
• 方便热更新。
• 调试和测试方便。
• Electron使用nodejs。可以导入Chrome应用程序中不容易使用的许多模块。
• Electron文档要好得多，尽管它是一个更年轻的平台。
• 缺点是：不适合开发轻量级的应用。即使一个electron的项目框架，也包含chromium内核，打包完接近200M。
• 相比开发的桌面应用，性能远远不如后者。
• 启动速度慢。
• 每个窗口都是一个新的进程，占据大量内存。

Electron 24.0.0 版本更新内容

• 技术栈

兼容Chromium 112.0.5615.49：

• 支持Chrome 112

• 支持Chrome 111

• 支持DevTools 112

• 支持DevTools 111

兼容Node.js 18.12.1

兼容V8 11.0

• 重大变化

API 已更改：nativeImage.createThumbnailFromPath(path, size)

maxSize 参数已更改为 size，以反映传入的大小将是创建的缩略图的大小。以前，如果图像小于 maxSize，Windows 不会放大图像，而 macOS 会始终将大小设置为 maxSize。现在跨平台的行为是相同的。

// 128x128 图片const imagePath = path.join('path', 'to', 'capybara.png');// 放大较小的图像const upSize = { width: 256, height: 256 };nativeImage.createThumbnailFromPath(imagePath, upSize).then((result) => { console.log(result.getSize()); // { width: 256, height: 256 }});// 按比例缩小较大的图像const downSize = { width: 64, height: 64 };nativeImage.createThumbnailFromPath(imagePath, downSize).then((result) => { console.log(result.getSize()); // { width: 64, height: 64 }});

弃用：BrowserWindow.setTrafficLightPosition(position)

BrowserWindow.setTrafficLightPosition(position) 已被弃用，应改用 BrowserWindow.setWindowButtonPosition(position) API，它接受 null 而不是 { x: 0, y: 0 } 以将位置重置为系统默认值。

// 在 Electron 24 中弃用win.setTrafficLightPosition({ x: 10, y: 10 });win.setTrafficLightPosition({ x: 0, y: 0 });// 替换为win.setWindowButtonPosition({ x: 10, y: 10 });win.setWindowButtonPosition(null);

弃用：BrowserWindow.getTrafficLightPosition()

BrowserWindow.getTrafficLightPosition() 已被弃用，应改用 BrowserWindow.getWindowButtonPosition() API，当没有自定义位置时，它返回 null 而不是 { x: 0, y: 0 }。

// 在 Electron 24 中弃用const pos = win.getTrafficLightPosition();if (pos.x === 0 && pos.y === 0) { // No custom position.}// 替换为const ret = win.getWindowButtonPosition();if (ret === null) { // 没有自定义位置}

• 新特性

• 添加了使用 cookies.get() 过滤 HttpOnly cookie 的功能。
• 将 logUsage 添加到 shell.openExternal() 选项，这允许将 SEE_MASK_FLAG_LOG_USAGE标志传递给 Windows 上的 ShellExecuteEx。SEE_MASK_FLAG_LOG_USAGE 标志表示用户发起的启动，可以跟踪常用程序和其他行为。
• 向 webRequest 过滤器添加 types，添加过滤监听的请求的能力。
• 向 webContents 添加了一个新的 devtools-open-url 事件，以允许开发人员使用它们打开新窗口。
• 向 webContents.print() 添加了几个标准页面大小选项。
• 向会话处理程序 ses.setDisplayMediaRequestHandler() 回调添加了 enableLocalEcho标志，以允许在音频为 WebFrameMain 时在本地输出流中回显远程音频输入。
• 允许将特定于应用的用户名传递给 inAppPurchase.purchaseProduct()。
• 公开 window.invalidateShadow() 以清除 macOS 上残留的视觉伪影。
• 整个程序优化现在在 Electron 节点头文件配置文件中默认启用，允许编译器使用程序中所有模块的信息执行优化，而不是基于每个模块（编译）。
• SystemPreferences::CanPromptTouchID (macOS) 现在支持 Apple Watch。

• 结束对 21.x.y 的支持

根据项目的支持政策，Electron 21.x.y 已终止支持。鼓励开发人员和应用程序升级到更新版本的 Electron。

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。