跳至主要內容

Electron 0.37 的新功能

·4 分鐘閱讀
zeke
zeke

Electron 0.37 最近已發佈，其中包含從 Chrome 47 到 Chrome 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 現在更簡潔且更精簡地指派

瀏覽器處理序 Requires​
const { app, BrowserWindow, Menu } = require('electron');
渲染器處理序 Requires​
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');
});