跳转到主要内容

Electron 0.37 的新功能

·阅读时长 5 分钟

Electron 0.37 近期已发布,主要升级了 Chrome 版本从 47 到 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');
});

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