跳转到主要内容

45 篇标记为“Release”的帖子

关于 Electron 新发布的博客文章

查看所有标签

Electron 2.0 及未来 - 语义化版本

·一分钟阅读

Electron 的新主要版本正在开发中,随之而来的是我们版本控制策略的一些变化。从 2.0.0 版本开始,Electron 将严格遵守语义化版本控制。


这一变化意味着您会更频繁地看到主版本号的更新,并且这通常是对 Chromium 的重大更新。补丁版本也将更加稳定,因为它们现在只包含错误修复,而没有新功能。

主版本号递增

  • Chromium 版本更新
  • Node.js 主版本更新
  • Electron 破坏性 API 更改

次要版本号递增

  • Node.js 次要版本更新
  • Electron 非破坏性 API 更改

补丁版本号递增

  • Node.js 补丁版本更新
  • 与修复相关的 Chromium 补丁
  • Electron 错误修复

由于 Electron 的 semver 范围现在将更有意义,我们建议使用 npm 默认的 --save-dev 标志来安装 Electron,它会在版本号前加上 ^,让您安全地及时更新次要版本和补丁版本。

npm install --save-dev electron

对于仅对错误修复感兴趣的开发者,您应该使用波浪线 semver 前缀,例如 ~2.0.0,它永远不会引入新功能,只进行修复以提高稳定性。

更多详情,请参阅 electronjs.org/docs/tutorial/electron-versioning

Electron 1.0

·阅读时长 4 分钟

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


Electron 1.0

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 分析工具种子客户端机器人

在过去两年中,我们看到公司和开源项目都选择 Electron 作为其应用的基础。仅在过去一年中,Electron 的下载量就超过了 120 万次。请浏览一些令人惊叹的 Electron 应用,如果您的应用尚未列出,请将其添加进去。

Electron downloads

Electron API 演示

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

Electron API Demos

Devtron

我们还添加了一个新扩展,以帮助您调试 Electron 应用。 DevtronChrome 开发者工具的一个开源扩展,旨在帮助您检查、调试和排查您的 Electron 应用。

Devtron

功能

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

Spectron

最后,我们发布了 Spectron 的新版本,它是 Electron 应用程序的集成测试框架。

Spectron

Spectron 3.0 对整个 Electron API 提供了全面的支持,使您能够更快地编写测试,以验证您的应用程序在各种场景和环境中的行为。Spectron 基于 ChromeDriverWebDriverIO,因此它还提供了页面导航、用户输入和 JavaScript 执行的完整 API。

社区

Electron 1.0 是数百名开发人员社区共同努力的成果。除了核心框架之外,还发布了数百个库和工具,以使构建、打包和部署 Electron 应用程序更加容易。

现在有一个新的 社区页面,列出了许多正在开发的很棒的 Electron 工具、应用、库和框架。您还可以查看 ElectronElectron Userland 组织,了解其中一些精彩的项目。

刚接触 Electron?观看 Electron 1.0 介绍视频

Electron 0.37 的新功能

·阅读时长 5 分钟

Electron 0.37 最近已发布,其中包含了从 Chrome 47 到 Chrome 49 的重大升级以及几项新的核心 API。此最新版本引入了 Chrome 48Chrome 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');

变量值也可以从开发工具的样式部分进行编辑,以获得快速反馈和调整

CSS properties in Styles tab

KeyboardEvent.code 属性

Chrome 48 为 KeyboardEvent 事件添加了新的 code 属性,该属性将是按下的物理键,与操作系统键盘布局无关。

这应该能使您的 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 上的 showhide 事件

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

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 上的 platform-theme-changed 事件(适用于 OS X

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

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

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

OS Xapp.isDarkMode()

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

BrowserWindow 上的 scroll-touch-beginscroll-touch-end 事件(适用于 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 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 新功能

·阅读时长 4 分钟

最近,Electron 迎来了一些有趣的更新和演讲,这里为您做一个汇总。


来源

截至 v0.32.0,Electron 已更新至 Chrome 45。其他更新包括...

更好的文档

new docs

我们对文档进行了重构和标准化,使其看起来和阅读起来都更好。此外,还有社区贡献的文档翻译,例如日语和韩语。

相关拉取请求: electron/electron#2028electron/electron#2533electron/electron#2557electron/electron#2709electron/electron#2725electron/electron#2698electron/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 的模块在从源代码构建时可以 against Electron 编译。

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

ARM 支持

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

相关问题: atom/libchromiumcontent#138electron/electron#2094electron/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#2677electron/electron#1935electron/electron#1532electron/electron#805electron/electron#1669electron/electron#1835

Atom

Atom 已升级到 Electron v0.30.6,运行 Chrome 44。目前正在 atom/atom#8779 上进行升级到 v0.33.0 的工作。

演讲

GitHub 用户 Amy PalamountainNordic.js 的一次演讲中对 Electron 进行了精彩介绍。她还创建了 electron-accelerator 库。

使用 Electron 构建原生应用(作者:Amy Palomountain)

同样来自 Atom 团队的 Ben OgleYAPC Asia 上发表了关于 Electron 的演讲

使用 Web 技术构建桌面应用(作者:Ben Ogle)

Atom 团队成员 Kevin Sawicki 等人在最近的 Bay Area Electron 用户组聚会上就 Electron 进行了演讲。 视频已发布,以下是其中两个:

Electron 的历史,作者:Kevin Sawicki

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