跳到主要內容

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 新增了 code 屬性，該屬性可在 KeyboardEvent 事件中使用，它將是按下的實體按鍵，與作業系統鍵盤配置無關。

這應該可以讓您在 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 上的 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');
});

app 上適用於 OS 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 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');
});