跳到主要内容

Electron 0.37 有什么新变化

·阅读时长 4 分钟
zeke
zeke

Electron 0.37 最近已发布，其中包括将 Chrome 从 47 大幅升级到 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');

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

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

OS X 上 `app` 的 `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');
});