在过去的两年里，Electron 帮助开发者使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。现在我们很高兴分享我们框架以及创建它的社区的一个重要里程碑。Electron 1.0 的发布现已在 electronjs.org 上提供。

Electron 1.0 代表了 API 稳定性和成熟度的重要里程碑。此版本允许您构建在 Windows、Mac 和 Linux 上表现和感觉都真正原生的应用。借助新的文档、新工具和引导您了解 Electron API 的新应用，构建 Electron 应用比以往任何时候都更容易。

如果您准备好构建您的第一个 Electron 应用，这里有一个快速入门指南来帮助您入门。

我们很高兴看到您接下来使用 Electron 构建什么。

Electron 的路径​

我们在发布 Atom 时发布了 Electron，距今已两年多。Electron，当时被称为 Atom Shell，是我们构建 Atom 的框架。在那些日子里，Atom 是 Electron 提供的特性和功能背后的驱动力，因为我们努力发布 Atom 的初始版本。

现在驱动 Electron 的是一个不断壮大的开发者和公司社区，他们构建了从 电子邮件、聊天 和 Git 应用 到 SQL 分析工具、torrent 客户端 和 机器人 的各种应用。

在过去的两年里，我们看到公司和开源项目都选择 Electron 作为其应用的基础。仅在过去一年中，Electron 的下载量就超过 120 万次。参观一些令人惊叹的 Electron 应用，如果您的应用尚未在那里，请添加它。

Electron API 演示​

除了 1.0 版本外，我们还发布了一个新应用，以帮助您探索 Electron API 并了解有关如何使您的 Electron 应用感觉更原生的更多信息。Electron API 演示应用包含代码片段，可帮助您开始构建应用，并提供有关有效使用 Electron API 的技巧。

Devtron​

我们还添加了一个新扩展来帮助您调试 Electron 应用。Devtron 是 Chrome 开发者工具 的一个开源扩展，旨在帮助您检查、调试和排除 Electron 应用的故障。

功能​

• 依赖关系图，可帮助您可视化主进程和渲染器进程中应用的内部和外部库依赖关系
• IPC 监视器，用于跟踪和显示应用中进程之间发送和接收的消息
• 事件检查器，向您显示应用中在核心 Electron API（例如窗口、应用和进程）上注册的事件和侦听器
• App Linter，用于检查您的应用是否存在常见错误和缺少的功能

Spectron​

最后，我们发布了新版本的 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 应用中可用的新功能。

新功能​

CSS 自定义属性​

如果您使用过 Sass 和 Less 等预处理器语言，您可能熟悉变量，它允许您为颜色方案和布局等事物定义可重用的值。变量有助于保持样式表的 DRY 并使其更易于维护。

CSS 自定义属性类似于预处理变量，因为它们是可重用的，但它们也具有一个独特的品质，使其更加强大和灵活：它们可以使用 JavaScript 进行操作。这个微妙但强大的功能允许动态更改视觉界面，同时仍然受益于 CSS 的硬件加速，并减少了前端代码和样式表之间的代码重复。

有关 CSS 自定义属性的更多信息，请参阅 MDN 文章 和 Google Chrome 演示。

CSS 变量实际应用​

让我们来看一个简单的变量示例，该示例可以在您的应用中实时调整。

: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 添加了新的 code 属性，该属性在 KeyboardEvent 事件中可用，它将是按下的物理键，独立于操作系统键盘布局。

这应该使在您的 Electron 应用中实现自定义键盘快捷键在不同机器和配置之间更加准确和一致。

window.addEventListener('keydown', function (event) {
  console.log(`${event.code} was pressed.`);
});

查看 此示例 以查看其运行情况。

Promise 拒绝事件​

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);
});

查看 此示例 以查看其运行情况。

V8 中的 ES2015 更新​

现在 Electron 中的 V8 版本包含了 91% 的 ES2015。以下是一些有趣的添加，您可以开箱即用——无需标志或预编译器

默认参数​

function multiply(x, y = 1) {
  return x * y;
}

multiply(5); // 5

解构赋值​

Chrome 49 添加了 解构赋值，使赋值变量和函数参数变得更加容易。

这使得 Electron 的 require 语句现在更简洁和紧凑

浏览器进程 Require​

const { app, BrowserWindow, Menu } = require('electron');

渲染器进程 Require​

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，您可以在 Electron 版本的发行说明中查看每个新的 API。

BrowserWindow 上的 show 和 hide 事件​

这些事件在窗口显示或隐藏时发出。

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');
});

app 上用于 OS X 的 platform-theme-changed​

当系统 深色模式 主题切换时，会发出此事件。

const { app } = require('electron');

app.on('platform-theme-changed', function () {
  console.log(`Platform theme changed. In dark mode? ${app.isDarkMode()}`);
});

用于 OS X 的 app.isDarkMode()​

如果系统处于深色模式，此方法返回 true，否则返回 false。

用于 OS X 的 BrowserWindow 的 scroll-touch-begin 和 scroll-touch-end 事件​

当滚轮事件阶段开始或结束时，会发出这些事件。

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 版本。

通过 V8 的 ES6 支持​

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);

Rest 参数

// Represent indefinite number of arguments as an array
(o, c, ...args) => {
  console.log(args.length);
};

Chromium 功能​

感谢 Google 和贡献者为 Chromium 所做的所有努力，当您构建 Electron 应用时，您还可以使用很酷的功能，例如（但不限于）

• MouseEvent.getModifierState()
• CSS.escape()
• Fetch API 流

关注 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 不会在几个月内发布，因此在这些更改变为重大更改之前，您还有一些时间。

弃用警告​

默认情况下，如果您正在使用已弃用的 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 });

遵循 DOM 的 API 名称约定​

Electron 中的 API 名称过去首选所有 API 名称的 camelCase，例如 Url 到 URL，但 DOM 有自己的约定，他们更喜欢 URL 而不是 Url，同时使用 Id 而不是 ID。我们已完成以下 API 重命名以匹配 DOM 的样式

• Url 重命名为 URL
• Csp 重命名为 CSP

当您的应用使用 Electron v0.35.0 时，由于这些更改，您会注意到很多弃用。修复它们的简单方法是将所有 Url 实例替换为 URL。

Tray 的事件名称的更改​

Tray 事件名称的样式与其他模块略有不同，因此已进行重命名以使其与其他模块匹配。

• clicked 重命名为 click
• double-clicked 重命名为 double-click
• right-clicked 重命名为 right-click

最近，Electron 添加了两个令人兴奋的功能：Mac App Store 兼容版本和内置 Windows 自动更新器。

Mac App Store 支持​

从 v0.34.0 开始，每个 Electron 版本都包含与 Mac App Store 兼容的版本。以前，基于 Electron 构建的应用程序不符合 Apple 对 Mac App Store 的要求。这些要求中的大多数与私有 API 的使用有关。为了以符合要求的方式沙箱化 Electron，需要删除两个模块

• crash-reporter
• auto-updater

此外，一些行为已更改，涉及检测 DNS 更改、视频捕获和辅助功能。您可以在文档中阅读有关更改和将您的应用提交到 Mac App Store的更多信息。可以在 Electron 版本页面上找到分发包，前缀为 mas-。

相关拉取请求：electron/electron#3108, electron/electron#2920

Windows 自动更新器​

在 Electron v0.34.1 中，auto-updater 模块得到了改进，以便与 Squirrel.Windows 一起使用。这意味着 Electron 附带了在 OS X 和 Windows 上轻松自动更新应用程序的方法。您可以在文档中阅读有关在 Windows 上设置您的应用以进行自动更新的更多信息。

相关拉取请求：electron/electron#1984

最近 Electron 上有一些有趣的更新和演讲，以下是汇总。

来源​

Electron 现在已更新至 Chrome 45，版本为 v0.32.0。其他更新包括...

更好的文档​

我们已经重组和标准化了文档，使其看起来更好，读起来更好。还有社区贡献的文档翻译，例如日语和韩语。

相关拉取请求：electron/electron#2028, electron/electron#2533, electron/electron#2557, electron/electron#2709, electron/electron#2725, electron/electron#2698, electron/electron#2649。

Node.js 4.1.0​

自 v0.33.0 起，Electron 附带 Node.js 4.1.0。

相关拉取请求：electron/electron#2817。

node-pre-gyp​

依赖 node-pre-gyp 的模块现在可以从源代码构建时针对 Electron 进行编译。

相关 Pull Request: mapbox/node-pre-gyp#175。

ARM 支持​

Electron 现在为 ARMv7 上的 Linux 提供构建版本。它可以在流行的平台如 Chromebook 和 Raspberry Pi 2 上运行。

相关 issue: atom/libchromiumcontent#138, electron/electron#2094, electron/electron#366。

Yosemite 风格的无边框窗口​

@jaanus 提交的补丁已被合并，该补丁像其他内置的 OS X 应用一样，允许在 OS X Yosemite 及更高版本上创建集成了系统交通信号灯的无边框窗口。

相关 Pull Request: electron/electron#2776。

Google 编程之夏打印支持​

在 Google 编程之夏之后，我们合并了 @hokein 提交的补丁，以改进打印支持，并添加了将页面打印为 PDF 文件的功能。

相关 issue: electron/electron#2677, electron/electron#1935, electron/electron#1532, electron/electron#805, electron/electron#1669, electron/electron#1835。

Atom​

Atom 现在已升级到 Electron v0.30.6，运行 Chrome 44。 升级到 v0.33.0 正在进行中，详见 atom/atom#8779。

演讲​

GitHub 用户 Amy Palamountain 在 Nordic.js 的演讲中对 Electron 做了精彩的介绍。她还创建了 electron-accelerator 库。

Amy Palomountain 关于使用 Electron 构建原生应用程序的演讲​

Atom 团队的 Ben Ogle 也在 YAPC Asia 上做了关于 Electron 的演讲

Ben Ogle 关于使用 Web 技术构建桌面应用的演讲​

Atom 团队成员 Kevin Sawicki 和其他人在最近的 Bay Area Electron User Group 聚会上做了关于 Electron 的演讲。 视频已经发布，这里有几个：

Kevin Sawicki 关于 Electron 历史的演讲​

Ben Gotow 关于如何使 Web 应用具有原生感的演讲​

加入我们，9 月 29 日在 GitHub 总部参加由 Atom 团队成员 @jlord 和 @kevinsawicki 主持的 Electron 聚会。届时将有演讲、点心，以及自由交流和结识其他使用 Electron 做有趣事情的人的机会。我们也会安排一些时间进行闪电演讲，欢迎有兴趣的朋友参加。期待在那里见到你！

演讲

• 来自 Jibo 的 Jonathan Ross 和 Francois Laberge 将分享他们如何使用 Electron 来动画化机器人。
• Jessica Lord 将会谈论在 Electron 上构建教学工具 Git-it。
• Tom Moor 将会谈论使用 speak.io 在 Electron 上构建视频和屏幕共享的优缺点。
• Ben Gotow 将会预览 N1：Nylas 邮件客户端，并谈论在 Electron 上开发它。

详情​

• 地点： GitHub HQ, 275 Brannan Street, San Francisco, CA, 94107
• 日期： 2015 年 9 月 29 日星期二
• 时间： 下午 6 点 - 晚上 9 点
• 报名： ti.to/github-events/electron-meetup

本周，我们已将 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​

为了获取文档，我们运行一个 脚本，其命令行界面为 script/docs vX.XX.X，可以带或不带 --latest 选项（取决于您导入的版本是否为最新版本）。我们的 文档获取脚本 使用了一些有趣的 Node 模块：

• nugget 用于 获取发布 tarball 并将其保存到临时目录。
• gunzip-maybe 用于 解压缩 tarball。
• tar-fs 用于 从 tarball 中流式传输 /docs 目录，并 过滤和处理文件 （在 through2 的帮助下），以便它们可以与我们的 Jekyll 网站良好地配合使用（更多信息见下文）。

测试 帮助我们了解所有组件是否按预期落地。

Jekyll​

Electron 网站是一个 Jekyll 站点，我们为文档使用了 Collections 功能，结构如下：

electron.atom.io
└── _docs
    ├── latest
    ├── v0.27.0
    ├── v0.26.0
    ├── so on
    └── so forth

Front matter​

为了让 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，这允许用户通过访问此 URL，electron.atom.io/docs/latest，查看最新版本文档的索引（即 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 文件中配置的列表。此外，我们还为该页面提供了一个 permalink：/docs/

{% raw %} {% for version in site.available_versions %} - [{{ version
}}](/docs/{{ version }}) {% endfor %} {% endraw %}

希望您喜欢这些技术细节！如果您有兴趣了解更多关于使用 Jekyll 构建文档站点的信息，请查看 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，我们很乐意与您聊聊您正在使用 Electron 构建的应用程序。发送电子邮件至 info@electronjs.org 告诉我们更多信息。您也可以关注新的 @ElectronJS Twitter 帐户，与项目保持联系。

⚡ 💙 🔌