跳到主要内容

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 分析工具torrent 客户端机器人 的所有内容。

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

Electron downloads

Electron API 演示

除了 1.0 版本之外,我们还发布了一个新应用程序,以帮助您探索 Electron API 并了解更多关于如何让您的 Electron 应用程序感觉像原生应用程序的信息。 Electron API 演示 应用程序包含代码片段,可帮助您启动您的应用程序并提供有关有效使用 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 的要求更简洁,更容易分配

浏览器进程需要
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,您可以在 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');
});

appOS 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 Xapp.isDarkMode()

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

OS X 的 BrowserWindow 的 scroll-touch-beginscroll-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 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,例如将 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 中的新功能

·阅读 4 分钟

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


来源

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

更好的文档

new docs

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

相关 pull 请求: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。

相关 pull 请求:electron/electron#2817.

node-pre-gyp

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

相关 pull 请求: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 及更高版本上创建集成了系统交通灯的无边框窗口。

相关 pull 请求: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 现在已升级到 Electron v0.30.6,运行 Chrome 44。正在 atom/atom#8779 上进行升级到 v0.33.0

演讲

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

Amy Palomountain 使用 Electron 构建原生应用程序

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

Ben Ogle 使用 Web 技术构建桌面应用程序

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

Kevin Sawicki 的 Electron 历史

Ben Gotow 让 Web 应用程序感觉像原生应用程序