跳到主要内容

在 Electron 中使用 V8 和 Chromium 功能

·2 分钟阅读

构建 Electron 应用程序意味着您只需要创建一个代码库并为一个浏览器进行设计,这非常方便。但是,由于 Electron 会随着 Node.jsChromium 的发布而保持最新,因此您还可以使用它们附带的强大功能。在某些情况下,这消除了您以前可能需要在 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}`);

新目标

Octocat() => {
if (!new.target) throw "Not new";
console.log("New Octocat");
}

// Throws
Octocat();
// Logs
new Octocat();

数组包括

// Returns true
[1, 2].includes(2);

剩余参数

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

Chromium 功能

感谢 Google 和贡献者在 Chromium 上所做的所有努力,当您构建 Electron 应用程序时,您还可以使用很棒的功能,例如(但不限于)

请关注 Google Chromium 博客 以了解新版本发布的功能,再次强调,您可以在这里查看 Electron 使用的 Chromium 版本。

您对什么感到兴奋?

请在 Twitter 上使用 @ElectronJS 发推文告诉我们您最喜欢的内置于 V8 或 Chromium 的功能。

Electron 1.0 中即将进行的 API 更改

·4 分钟阅读

自 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,例如 UrlURL,但 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 应用商店和 Windows 自动更新程序

·2 分钟阅读

最近,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 中的新功能

·2 分钟阅读

最近,关于 Electron 的一些有趣更新和演讲,这里有一个汇总。


来源

v0.32.0 开始,Electron 现在与 Chrome 45 同步。其他更新包括...

更好的文档

new docs

我们已经重新组织和标准化了文档,使其看起来更好、更易于阅读。还有社区贡献的文档翻译版本,例如日语和韩语。

相关拉取请求: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 进行编译。

相关拉取请求:mapbox/node-pre-gyp#175

ARM 支持

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

相关问题:atom/libchromiumcontent#138, electron/electron#2094, electron/electron#366

Yosemite 风格的无边框窗口

frameless window

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

相关拉取请求:electron/electron#2776

Google Summer of Code 打印支持

在 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

Atom 现在已升级到运行 Chrome 44 的 Electron v0.30.6。在 atom/atom#8779 上正在进行升级到 v0.33.0 的过程。

演讲

GitHub 用户 Amy PalamountainNordic.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 历史

如何让 Web 应用感觉像原生应用,作者:Ben Gotow

GitHub 总部的 Electron 聚会

·阅读时长:一分钟

请于 9 月 29 日加入我们在 GitHub 总部举行的 Electron 聚会,该聚会由 Atom 团队成员 @jlord@kevinsawicki 主持。届时将有演讲、零食和时间供大家交流,结识其他使用 Electron 做有趣事情的人。我们还会为感兴趣的人安排一些闪电演讲。希望能在那儿见到你!


演讲

  • 来自 JiboJonathan RossFrancois Laberge 将分享他们如何使用 Electron 来为机器人制作动画。
  • Jessica Lord 将会谈论如何在 Electron 上构建教学工具 Git-it
  • Tom Moor 将会谈论使用 speak.io 在 Electron 上构建视频和屏幕共享的优缺点。
  • Ben Gotow 将会预览 N1:Nylas 邮件客户端,并谈论如何在 Electron 上进行开发。

详情

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

electron-meetup-office-2

Electron 文档

·4 分钟阅读

本周,我们已将 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 模块

测试 帮助我们了解所有部分是否按预期着陆。

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

·2 分钟阅读

Atom Shell 现在名为 Electron。您可以在其新家 electronjs.org 上了解更多关于 Electron 以及人们使用它构建的应用程序的信息。


electron

Electron 是我们最初为 Atom 编辑器 构建的跨平台应用程序外壳,用于处理 Chromium/Node.js 事件循环集成和原生 API。

当我们开始时,我们的目标不仅仅是支持文本编辑器的需求。我们还希望创建一个简单的框架,让人们可以使用 Web 技术来构建具有所有原生装饰的跨平台桌面应用程序。

两年内,Electron 发展迅速。它现在包括自动应用程序更新、Windows 安装程序、崩溃报告、通知和其他有用的原生应用程序功能,所有这些都通过 JavaScript API 公开。我们还有更多工作要做。我们计划从 Atom 中提取更多库,使使用 Web 技术构建原生应用程序尽可能简单。

到目前为止,个人开发者、初创公司和大型公司都在 Electron 上构建了应用程序。他们创建了各种各样的应用程序,包括聊天应用程序、数据库浏览器、地图设计器、协作设计工具和移动原型设计应用程序。

查看新的 electronjs.org,了解更多人们使用 Electron 构建的应用程序,或者查看 文档,了解更多关于您可以做的其他事情。

如果您已经开始使用,我们很乐意与您聊聊您在 Electron 上构建的应用程序。请发送电子邮件至 [email protected],告诉我们更多信息。您还可以关注新的 @ElectronJS Twitter 帐户,与该项目保持联系。

💙 🔌