@electron 包将需要 Node.js 22 LTS。 请在我们的博客上阅读更多信息。
想了解 Electron 的入门知识吗？ 刚刚发布了两期新的播客，它们提供了关于 Electron 是什么、为何构建以及如何使用的精彩概述。
现已发布
Electron 是“仅仅一个框架中的 Chrome”吗？还是远不止于此？ Jessica 为 Scott 指明了正确的方向，并准确解释了 Electron 平台如何融入你的开发世界。
Electron 正在成为一种越来越重要且流行的使用 Web 技术构建多平台桌面应用程序的方式。 让我们深入了解这项出色的技术，看看如何利用它来提升我们自己以及用户在桌面上的体验。
如果你正在寻找 Electron 的入门知识，请听第一期。 第二期更详细地介绍了如何构建应用程序，并提供了来自 Nylas 的 Evan Morikawa 的精彩建议。
我们目前正在制作另外两期播客，预计下个月发布，请关注 @ElectronJS 的 Twitter 账号获取更新。
在过去的两年里，Electron 帮助开发者使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用程序。 现在我们很高兴地宣布我们的框架和创建它的社区迎来了一个重要的里程碑。 Electron 1.0 版本现已在 electronjs.org 上发布。
Electron 1.0 代表了 API 稳定性和成熟度方面的一个重要里程碑。 这个版本允许你构建在 Windows、Mac 和 Linux 上表现和感受都像原生应用一样的程序。 借助新的文档、新的工具以及一个可以引导你了解 Electron API 的新应用，构建 Electron 应用比以往任何时候都更容易。
如果你准备构建你的第一个 Electron 应用，这里有一个快速入门指南来帮助你开始。
我们很高兴看到你接下来会使用 Electron 构建什么。
大约两年前，我们发布 Atom 时，也同时发布了 Electron。 当时 Electron 被称为 Atom Shell，是我们构建 Atom 的基础框架。 那时，在我们努力发布 Atom 初版时，Atom 是 Electron 提供特性和功能的驱动力。
现在推动 Electron 发展的是一个不断壮大的开发者和公司社区，他们使用 Electron 构建各种应用，从电子邮件、聊天和 Git 客户端到 SQL 分析工具、torrent 客户端和 机器人。
在过去的两年里，我们看到公司和开源项目都选择 Electron 作为其应用的基础。 仅在过去的一年里，Electron 的下载量就超过 120 万次。 浏览一些优秀的 Electron 应用，如果你的应用不在其中，也可以添加。
随着 1.0 版本的发布，我们同时发布了一个新的应用来帮助你探索 Electron API 并了解如何让你的 Electron 应用更像原生应用。 Electron API Demos 应用包含代码片段，帮助你快速开始构建应用，并提供有效使用 Electron API 的技巧。
我们还添加了一个新的扩展，用于帮助你调试 Electron 应用。 Devtron 是 Chrome 开发者工具 的一个开源扩展，旨在帮助你检查、调试和排除 Electron 应用的问题。
最后，我们发布了 Spectron 的新版本，这是 Electron 应用的集成测试框架。
Spectron 3.0 全面支持整个 Electron API，让你能够更快地编写测试，验证应用程序在各种场景和环境下的行为。 Spectron 基于 ChromeDriver 和 WebDriverIO 构建，因此也具备完整的页面导航、用户输入和 JavaScript 执行 API。
Electron 1.0 是数百名开发者社区共同努力的成果。 除了核心框架之外，还发布了数百个库和工具，使 Electron 应用的构建、打包和部署更加容易。
现在有一个新的社区页面，列出了许多正在开发的优秀的 Electron 工具、应用、库和框架。 你也可以访问 Electron 和 Electron Userland 组织，查看其中一些出色的项目。
Electron 新手？ 观看 Electron 1.0 介绍视频
Electron 0.37 最近发布，其中包括从 Chrome 47 到 Chrome 49 的重大升级以及几个新的核心 API。 最新版本带来了 Chrome 48 和 Chrome 49 中发布的所有新特性。 这包括 CSS 自定义属性、增强的 ES6 支持、KeyboardEvent 改进、Promise 改进以及 Electron 应用中现已可用的许多其他新功能。
如果你使用过 Sass 和 Less 等预处理语言，你可能熟悉变量，它允许你为颜色方案和布局等定义可重用值。 变量有助于让你的样式表 DRY (Don't Repeat Yourself) 并更易于维护。
CSS 自定义属性与预处理变量类似，都是可重用的，但它们还有一个独特的特性，使其更加强大和灵活：它们可以用 JavaScript 操作。 这一微妙但强大的功能允许对视觉界面进行动态更改，同时仍然受益于 CSS 的硬件加速，并减少前端代码和样式表之间的代码重复。
有关 CSS 自定义属性的更多信息，请参阅 MDN 文章 和 Google Chrome 演示。
让我们看一个可以在你的应用中实时调整的简单变量示例。
:root {
--awesome-color: #a5ecfa;
}
body {
background-color: var(--awesome-color);
}
变量值可以直接在 JavaScript 中获取和更改
// Get the variable value ' #A5ECFA'
let color = window
.getComputedStyle(document.body)
.getPropertyValue('--awesome-color');
// Set the variable value to 'orange'
document.body.style.setProperty('--awesome-color', 'orange');
变量值也可以在开发者工具的样式部分进行编辑，以便快速反馈和调整
KeyboardEvent.code 属性Chrome 48 添加了 KeyboardEvent 事件上可用的新属性 code，它表示按下的是哪个物理按键，与操作系统的键盘布局无关。
这应该使得在你的 Electron 应用中实现自定义键盘快捷键更加准确，并且在不同机器和配置上保持一致。
window.addEventListener('keydown', function (event) {
console.log(`${event.code} was pressed.`);
});
查看此示例以了解其工作原理。
Chrome 49 添加了两个新的 window 事件，当被拒绝的 Promise 未被处理时，你可以收到通知。
window.addEventListener('unhandledrejection', function (event) {
console.log('A rejected promise was unhandled', event.promise, event.reason);
});
window.addEventListener('rejectionhandled', function (event) {
console.log('A rejected promise was handled', event.promise, event.reason);
});
查看此示例以了解其工作原理。
Electron 中目前的 V8 版本包含了 91% 的 ES2015 特性。 这里有一些你可以直接使用的有趣新增特性——无需标志或预编译器
function multiply(x, y = 1) {
return x * y;
}
multiply(5); // 5
Chrome 49 添加了解构赋值，使得变量和函数参数的赋值更加容易。
这使得 Electron 的 require 现在更清晰、更紧凑
const { app, BrowserWindow, Menu } = require('electron');
const { dialog, Tray } = require('electron').remote;
// Destructuring an array and skipping the second element
const [first, , last] = findAll();
// Destructuring function parameters
function whois({ displayName: displayName, fullName: { firstName: name } }) {
console.log(`${displayName} is ${name}`);
}
let user = {
displayName: 'jdoe',
fullName: {
firstName: 'John',
lastName: 'Doe',
},
};
whois(user); // "jdoe is John"
// Destructuring an object
let { name, avatar } = getUser();
下面是一些新的 Electron API，你可以在Electron 版本的发行说明中查看每个新 API。
show 和 hide 事件 on BrowserWindow当窗口显示或隐藏时，会触发这些事件。
const { BrowserWindow } = require('electron');
let window = new BrowserWindow({ width: 500, height: 500 });
window.on('show', function () {
console.log('Window was shown');
});
window.on('hide', function () {
console.log('Window was hidden');
});
platform-theme-changed on app for OS X当系统深色模式主题切换时，会触发此事件。
const { app } = require('electron');
app.on('platform-theme-changed', function () {
console.log(`Platform theme changed. In dark mode? ${app.isDarkMode()}`);
});
app.isDarkMode() for OS X如果系统处于深色模式，此方法返回 true，否则返回 false。
scroll-touch-begin 和 scroll-touch-end 事件 to BrowserWindow for OS X当滚轮事件阶段开始或结束时，会触发这些事件。
const { BrowserWindow } = require('electron');
let window = new BrowserWindow({ width: 500, height: 500 });
window.on('scroll-touch-begin', function () {
console.log('Scroll touch started');
});
window.on('scroll-touch-end', function () {
console.log('Scroll touch ended');
});
构建一个 Electron 应用程序意味着你只需要创建一个代码库并针对一个浏览器进行设计，这非常方便。 但由于 Electron 会随着 Node.js 和 Chromium 的发布保持更新，你也可以利用它们附带的强大功能。 在某些情况下，这消除了你以前可能需要在 Web 应用中包含的依赖项。
有很多功能，我们将在这里介绍一些示例，但如果你有兴趣了解所有功能，可以关注 Google Chromium 博客 和 Node.js 变更日志。 你可以在 electronjs.org/#electron-versions 查看 Electron 使用的 Node.js、Chromium 和 V8 版本。
Electron 将 Chromium 的渲染库与 Node.js 结合。 两者共享相同的 JavaScript 引擎，即 V8。 许多 ECMAScript 2015 (ES6) 特性已经内置在 V8 中，这意味着你可以在 Electron 应用中直接使用它们，无需任何编译器。
以下是一些示例，但你还可以获得类（严格模式下）、块级作用域、Promise、类型化数组等。 查看此列表，了解更多 V8 中 ES6 特性的信息。
箭头函数
findTime () => {
console.log(new Date())
}
字符串插值
var octocat = 'Mona Lisa';
console.log(`The octocat's name is ${octocat}`);
New Target
Octocat() => {
if (!new.target) throw "Not new";
console.log("New Octocat");
}
// Throws
Octocat();
// Logs
new Octocat();
Array Includes
// Returns true
[1, 2].includes(2);
剩余参数
// Represent indefinite number of arguments as an array
(o, c, ...args) => {
console.log(args.length);
};
感谢 Google 和贡献者为 Chromium 付出的辛勤工作，当你构建 Electron 应用时，你也可以使用很棒的功能，例如（但不限于）
关注 Google Chromium 博客，了解新版本发布的特性，此外，你可以在这里查看 Electron 使用的 Chromium 版本。
在 Twitter 上告诉我们 @ElectronJS 你最喜欢的 V8 或 Chromium 内置特性。
从 Electron 的早期开始，追溯到它还叫做 Atom-Shell 的时候，我们一直在尝试为 Chromium 的内容模块和原生 GUI 组件提供一个友好的跨平台 JavaScript API。 这些 API 起初非常自然地发展起来，随着时间的推移，我们做了一些改变以改进最初的设计。
现在 Electron 正准备发布 1.0 版本，我们想借此机会解决最后一些棘手的 API 细节问题。 下面描述的更改已包含在 0.35.x 中，旧 API 会报告弃用警告，以便你可以在未来的 1.0 版本发布前进行更新。 Electron 1.0 将在几个月后发布，因此在这些更改成为 breaking change 之前你还有一些时间。
默认情况下，如果你使用已弃用的 API，会显示警告。 要关闭它们，你可以将 process.noDeprecation 设置为 true。 要跟踪弃用 API 用法的来源，你可以将 process.throwDeprecation 设置为 true 以抛出异常而不是打印警告，或者将 process.traceDeprecation 设置为 true 以打印弃用的跟踪信息。
内置模块现在被分组到一个模块中，而不是分开成独立的模块，因此你可以避免与其他模块冲突地使用它们
var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;
旧的 require('app') 方式仍然支持以兼容旧版本，但你也可以将其关闭
require('electron').hideInternalModules();
require('app'); // throws error.
remote 模块的更简单方式由于使用内置模块的方式发生了变化，我们使得在渲染器进程中使用主进程侧模块变得更容易。 现在你只需访问 remote 的属性即可使用它们
// New way.
var app = require('electron').remote.app;
var BrowserWindow = require('electron').remote.BrowserWindow;
而不是使用冗长的 require 链
// Old way.
var app = require('electron').remote.require('app');
var BrowserWindow = require('electron').remote.require('BrowserWindow');
ipc 模块ipc 模块同时存在于主进程和渲染器进程中，并且两端的 API 不同，这对于新用户来说相当令人困惑。 我们已将主进程中的模块重命名为 ipcMain，将渲染器进程中的模块重命名为 ipcRenderer，以避免混淆
// In main process.
var ipcMain = require('electron').ipcMain;
// In renderer process.
var ipcRenderer = require('electron').ipcRenderer;
对于 ipcRenderer 模块，接收消息时添加了一个额外的 event 对象，以匹配 ipcMain 模块处理消息的方式
ipcRenderer.on('message', function (event) {
console.log(event);
});
BrowserWindow 选项BrowserWindow 选项的命名风格与其他 API 的选项有所不同，并且由于名称中的 -，在 JavaScript 中使用起来有点困难。 它们现在已标准化为传统的 JavaScript 命名方式
new BrowserWindow({ minWidth: 800, minHeight: 600 });
Electron 中的 API 名称过去倾向于对所有 API 名称使用 camelCase 风格，例如将 Url 写成 URL，但 DOM 有自己的约定，它更喜欢 URL 而不是 Url，同时使用 Id 而不是 ID。 我们已进行以下 API 重命名以匹配 DOM 的风格
Url 重命名为 URLCsp 重命名为 CSP由于这些更改，在使用 Electron v0.35.0 构建应用时，你会注意到很多弃用警告。 解决这些问题的一个简单方法是将所有 Url 替换为 URL。
Tray 事件名称的更改Tray 事件名称的风格与其他模块略有不同，因此已进行了重命名以使其与其他模块匹配。
clicked 重命名为 clickdouble-clicked 重命名为 double-clickright-clicked 重命名为 right-click最近 Electron 添加了两个令人兴奋的功能：兼容 Mac App Store 的构建和内置的 Windows 自动更新程序。
从 v0.34.0 开始，每个 Electron 版本都包含一个与 Mac App Store 兼容的构建。 以前，基于 Electron 构建的应用不符合 Apple 对 Mac App Store 的要求。 这些要求大多与私有 API 的使用有关。 为了以符合要求的方式对 Electron 进行沙箱化，需要移除两个模块
crash-reporterauto-updater此外，在检测 DNS 更改、视频捕获和辅助功能方面，某些行为也发生了变化。 你可以在文档中阅读更多关于这些变化以及将应用提交到 Mac App Store 的信息。 可分发版本可以在 Electron 版本页面找到，它们以 mas- 为前缀。
相关拉取请求：electron/electron#3108, electron/electron#2920
在 Electron v0.34.1 中，auto-updater 模块得到了改进，以便与 Squirrel.Windows 配合使用。 这意味着 Electron 提供了在 OS X 和 Windows 上自动更新应用的简便方法。 你可以在文档中阅读更多关于在 Windows 上为应用设置自动更新的信息。
相关拉取请求：electron/electron#1984
最近有一些关于 Electron 的有趣更新和演讲，这里是一个汇总。
Electron 从 v0.32.0 开始已更新至 Chrome 45。 其他更新包括...
我们已经重构并标准化了文档，使其看起来更好、阅读体验更佳。 还有社区贡献的文档翻译，例如日语和韩语。
相关拉取请求：electron/electron#2028, electron/electron#2533, electron/electron#2557, electron/electron#2709, electron/electron#2725, electron/electron#2698, electron/electron#2649。
从 v0.33.0 开始，Electron 集成了 Node.js 4.1.0。
相关拉取请求：electron/electron#2817。
现在，依赖 node-pre-gyp 的模块在从源码构建时可以针对 Electron 进行编译。
相关拉取请求：mapbox/node-pre-gyp#175。
Electron 现在提供适用于 ARMv7 架构的 Linux 构建版本。 它可以在 Chromebook 和 Raspberry Pi 2 等流行平台上运行。
相关议题：atom/libchromiumcontent#138, electron/electron#2094, electron/electron#366。
由 @jaanus 提交的补丁已合并，该补丁允许在 OS X Yosemite 及更高版本上创建集成系统交通灯的无边框窗口，就像其他内置的 OS X 应用一样。
相关拉取请求：electron/electron#2776。
在 Google Summer of Code 结束后，我们合并了 @hokein 的补丁，以改进打印支持，并新增了将页面打印为 PDF 文件的功能。
相关问题：electron/electron#2677、electron/electron#1935、electron/electron#1532、electron/electron#805、electron/electron#1669、electron/electron#1835。
Atom 现已升级到运行 Chrome 44 的 Electron v0.30.6。正在 atom/atom#8779 上进行升级到 v0.33.0 的工作。
GitHub 的 Amy Palamountain 在 Nordic.js 的一次讲座中对 Electron 进行了精彩的介绍。她还创建了 electron-accelerator 库。
同样来自 Atom 团队的 Ben Ogle 在 YAPC Asia 发表了关于 Electron 的讲座
Atom 团队成员 Kevin Sawicki 和其他人最近在 湾区 Electron 用户组 聚会上发表了关于 Electron 的讲座。视频 已发布，这里有几个
9 月 29 日加入我们，在 GitHub 总部参加由 Atom 团队成员 @jlord 和 @kevinsawicki 主持的 Electron 聚会。将有讲座、点心和交流时间，以便认识其他使用 Electron 做酷事的人。我们也将为感兴趣的人提供一点时间进行闪电演讲。希望在那里见到你！
讲座
本周，我们将 Electron 的文档放在了 electronjs.org。你可以访问 /docs/latest 查看最新文档。我们也将保留旧版本的文档，因此你可以访问 /docs/vX.XX.X 查看与你当前使用的版本对应的文档。
你可以访问 /docs 查看可用版本，或访问 /docs/all 查看最新版本的所有文档（方便使用 cmd + f 搜索）。
如果你想为文档内容做出贡献，可以在 Electron 仓库 中进行，文档就是从那里获取的。我们在每个小版本发布时获取文档，并将其添加到 Electron 网站仓库，该仓库是使用 Jekyll 构建的。
如果你有兴趣了解更多关于我们如何将文档从一个仓库拉取到另一个仓库的技术细节，请继续阅读下文。否则，请尽情享用 文档！
我们按原样保留 Electron 核心仓库中的文档。这意味着 electron/electron 将始终包含最新版本的文档。当发布新版本 Electron 时，我们会将其复制到 Electron 网站仓库 electron/electronjs.org。
为了获取文档，我们运行一个带命令行接口的脚本，命令为 script/docs vX.XX.X，带或不带 --latest 选项（取决于你导入的版本是否为最新版本）。我们的获取文档脚本使用了一些有趣的 Node 模块：
nugget 用于获取发布 tarball 并将其保存到临时目录。gunzip-maybe 用于解压 tarball。tar-fs 用于从 tarball 中流式传输 `/docs` 目录，并通过过滤和处理文件（借助于 through2），使其能与我们的 Jekyll 网站良好协作（详情见下文）。测试有助于我们确认所有组件都按预期到位。
Electron 网站是一个 Jekyll 网站，我们利用了 集合 (Collections) 功能来组织文档，结构如下：
electron.atom.io
└── _docs
├── latest
├── v0.27.0
├── v0.26.0
├── so on
└── so forth
Jekyll 要渲染每个页面，至少需要空的 front matter。我们将在所有页面上使用 front matter，所以在流式传输 `/docs` 目录时，我们检查文件是否为 `README.md` 文件（在这种情况下它会获得一种 front matter 配置），或者是否为任何其他具有 markdown 扩展名的文件（在这种情况下它会获得稍微不同的 front matter）。
每个页面都接收以下 front matter 变量：
---
version: v0.27.0
category: Tutorial
title: 'Quick Start'
source_url: 'https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md'
---
README.md 额外获得一个 permalink，这样它的 URL 就有一个共同的根路径 index.html，而不是一个奇怪的 `/readme/`。
permalink: /docs/v0.27.0/index.html
在网站的 _config.yml 文件中，每次使用 --latest 标志获取文档时，都会设置一个变量 latest_version。我们还添加了已添加到网站的所有版本的列表，以及我们希望整个文档集合使用的 permalink。
latest_version: v0.27.0
available_versions:
- v0.27.0
collections:
docs: { output: true, permalink: '/docs/:path/' }
我们网站根目录中的 latest.md 文件除了这个 front matter 外是空的，这允许用户通过访问 electron.atom.io/docs/latest 这个 URL 来查看最新版本文档的索引（即 README），而不是必须指定最新的版本号（尽管你也可以这样做）。
---
permalink: /docs/latest/
redirect_to: /docs/{{ site.data.releases[0].version }}
---
在 docs.html 布局模板中，我们使用条件语句来显示或隐藏页眉和面包屑中的信息。
{% raw %} {% if page.category != 'ignore' %}
<h6 class="docs-breadcrumb">
{{ page.version }} / {{ page.category }} {% if page.title != 'README' %} / {{
page.title }} {% endif %}
</h6>
{% endif %} {% endraw %}
为了创建一个显示可用版本的页面，我们只需在网站根目录中的 versions.md 文件中遍历配置中的列表即可。同时，我们为该页面指定一个永久链接：/docs/。
{% raw %} {% for version in site.available_versions %} - [{{ version
}}](/docs/{{ version }}) {% endfor %} {% endraw %}
希望您喜欢这些技术细节！如果您对使用 Jekyll 构建文档网站有更多兴趣，可以查阅 GitHub 文档团队如何使用 GitHub 在 Jekyll 上发布 GitHub 文档。
Atom Shell 现已更名为 Electron。你可以在它的新家 electronjs.org 了解更多关于 Electron 以及人们如何使用它构建应用的信息。
Electron 是我们最初为 Atom 编辑器 构建的跨平台应用外壳，用于处理 Chromium/Node.js 事件循环集成和原生 API。
当我们刚开始时，我们的目标不仅仅是支持文本编辑器的需求。我们还希望创建一个直观的框架，让人们可以使用 Web 技术构建具有所有原生特性的跨平台桌面应用。
在两年内，Electron 取得了巨大的发展。它现在包括自动应用更新、Windows 安装程序、崩溃报告、通知以及其他有用的原生应用功能——所有这些都通过 JavaScript API 公开。我们还有更多工作正在进行中。我们计划从 Atom 中提取更多库，以便使用 Web 技术构建原生应用尽可能容易。
到目前为止，个人开发者、初创公司和大型企业都在 Electron 上构建了应用。他们创建了各种各样的应用——包括聊天应用、数据库浏览器、地图设计器、协作设计工具和移动原型应用。
访问新的 electronjs.org 查看更多人们在 Electron 上构建的应用，或者查看文档，了解更多你可以用它做什么。
如果你已经开始使用，我们很乐意与你聊聊你在 Electron 上构建的应用。发送电子邮件到 info@electronjs.org 告诉我们更多。你也可以关注新的 @ElectronJS Twitter 账号，与项目保持联系。
⚡ 💙 🔌