5 篇標記為「功能」的文章

Electron 的 API 工作組正在採用開放的意見徵求 (RFC) 流程，以協助引導 Electron 核心的較大變更。

為什麼使用 RFC？​

簡而言之，我們希望簡化將重大變更加入 Electron 核心的流程。

目前，新的程式碼變更主要透過 GitHub 上的 Issue 和 Pull Request 進行討論。對於 Electron 的大多數變更來說，這是一個良好的系統。許多錯誤修復、文件變更，甚至新功能都非常簡單，可以透過標準 GitHub 流程以非同步方式檢閱和合併。

對於更重大的變更，例如大型 API 介面或會影響大多數 Electron 應用程式的重大變更，在撰寫大部分程式碼之前，最好在構思階段進行檢閱。

此流程旨在對大眾開放，這也將使開放原始碼社群更容易在潛在變更加入 Electron 之前提供意見反應。

運作方式為何？​

整個 RFC 流程都位於 GitHub 上的 electron/rfcs 儲存庫中。這些步驟在儲存庫 README 中詳細說明。

簡而言之，當將 PR 送出至 electron/rfcs 儲存庫時，RFC 即為已提案。當 PR 合併至儲存庫的 main 分支時，已提案的 RFC 會變成

• 啟用，這表示 Electron 維護人員同意在 electron/electron 中實作，或
• 如果最終拒絕 PR，則為已拒絕。

如果實作已合併至 electron/electron，則啟用 RFC 即為已完成。

誰可以參與？​

Electron 社群中的任何人都可以在 electron/rfcs 儲存庫中提交 RFC 或留下意見反應！

• 若要查看作用中的 RFC 清單，請參閱 儲存庫中的 text 資料夾。
• 若要留下對已提案 RFC 的意見反應，請查看開啟 PR 的清單。
• 若要提交新的 RFC，請查看儲存庫的 README 和 RFC 範本。

我們希望使此流程成為雙向對話，並鼓勵社群參與，以取得未來可能使用這些 API 的 Electron 應用程式的各種意見。如果您有興趣對目前已提案的 RFC 留下意見反應，Electron 維護人員已建立了一些

• Electron C API
• 用於服務工作站的預先載入領域

致謝​

Electron 的 RFC 流程仿照許多已建立的開放原始碼 RFC 流程。許多想法和大部分文案的靈感來自

• emberjs/rfcs
• reactjs/rfcs
• rust-lang/rfcs
• tauri-apps/rfcs
• vuejs/rfcs
• yarnpkg/rfcs

隨著 Apple Silicon 硬體將在今年稍後發布，您在新的硬體上執行 Electron 應用程式的路徑看起來會是如何？

隨著 Electron 11.0.0-beta.1 的發布，Electron 團隊現在開始提供可在 Apple 計劃於今年稍後推出的新 Apple Silicon 硬體上運行的 Electron 版本。您可以使用 npm install electron@beta 獲取最新的 beta 版本，或直接從我們的發布網站下載。

運作方式為何？​

從 Electron 11 開始，我們將為 Intel Mac 和 Apple Silicon Mac 提供獨立的 Electron 版本。在此變更之前，我們已經提供了兩個構件，darwin-x64 和 mas-x64，後者用於 Mac App Store 的相容性用途。現在，我們又提供了另外兩個構件，darwin-arm64 和 mas-arm64，它們分別是上述構件在 Apple Silicon 上的對應版本。

我需要做什麼？​

您需要發布兩個版本的應用程式：一個用於 x64 (Intel Mac)，另一個用於 arm64 (Apple Silicon)。好消息是，electron-packager、electron-rebuild 和 electron-forge 已經支援以 arm64 架構為目標。只要您正在運行這些套件的最新版本，一旦您將目標架構更新為 arm64，您的應用程式應該就能完美運行。

未來，我們將發布一個套件，允許您將 arm64 和 x64 應用程式「合併」為一個單一的通用二進位檔，但值得注意的是，這個二進位檔會非常龐大，可能不適合發布給使用者。

更新：這個套件現在可以在 @electron/universal 取得。您可以使用它將兩個封裝好的 x64 和 arm64 應用程式合併為一個單一的二進位檔。

潛在問題​

原生模組​

由於您以新的架構為目標，因此您需要更新一些可能導致建置問題的依賴項。以下列出了一些特定依賴項的最低版本，以供您參考。

由於這些依賴項的版本要求，您可能需要修復/更新某些原生模組。值得注意的是，Xcode 的升級將引入新版本的 macOS SDK，這可能會導致您的原生模組建置失敗。

我該如何測試？​

目前，Apple Silicon 應用程式只能在 Apple Silicon 硬體上運行，而撰寫此部落格文章時，該硬體尚未商業上市。如果您有 開發者轉換套件，您可以在該套件上測試您的應用程式。否則，您必須等待 Apple Silicon 生產硬體發布後才能測試您的應用程式是否正常運作。

Rosetta 2 呢？​

Rosetta 2 是 Apple 最新的 Rosetta 技術迭代，它允許您在其新的 arm64 Apple Silicon 硬體上運行 x64 Intel 應用程式。儘管我們相信 x64 Electron 應用程式將在 Rosetta 2 下運行，但仍有一些重要事項需要注意（以及您應該發布原生 arm64 二進位檔的原因）。

• 您的應用程式效能將會顯著降低。Electron / V8 對於 JavaScript 使用 JIT 編譯，由於 Rosetta 的運作方式，您實際上會執行兩次 JIT（一次在 V8 中，一次在 Rosetta 中）。
• 您將失去 Apple Silicon 中新技術的好處，例如增加的記憶體頁面大小。
• 我們有提到效能將會顯著降低嗎？

新的 Electron 2.0 版本系列包含了許多新功能和修復。這個新主要版本的重點之一是針對 Apple Mac App Store 的新 inAppPurchase API。

應用程式內購買允許直接從應用程式內購買內容或訂閱。這為開發者提供了一個輕鬆採用 免費增值商業模式 的方法，使用者可以免費下載應用程式，並可選擇購買應用程式內的額外功能、內容或訂閱。

社群貢獻者 Adrien Fery 將新的 API 加入 Electron，以便在 Amanote 這個用於演講和會議的筆記 Electron 應用程式中啟用應用程式內購買。Amanote 可免費下載，並允許在 PDF 中加入清晰且有結構的筆記，並提供數學公式、繪圖、錄音等功能。

自從將應用程式內購買支援加入 Amanote 的 Mac 版本以來，Adrien 發現銷售額增加了 40%！

開始使用​

新的 inAppPurchase API 已經在最新的 Electron beta 版本中推出

npm i -D electron@beta

API 的文件可以在 GitHub 上找到，而且 Adrien 也很友善地撰寫了一篇關於如何使用此 API 的教學。若要開始在您的應用程式中加入應用程式內購買功能，請參閱本教學。

更多關於 API 的改進正在進行中，並即將在即將發布的 Electron beta 版本中推出。

Windows 可能是下一個目標​

接下來，Adrien 希望在 Electron 中加入 Microsoft Store 應用程式內購買的支援，為 Amanote 開啟新的收入管道。請繼續關注相關的發展！

Electron 1.6.3 beta 版本包含了對 macOS Touch Bar 的初步支援。

新的 Touch Bar API 允許您加入按鈕、標籤、快顯視窗、顏色選擇器、滑桿和分隔符。這些元素可以動態更新，並且在與之互動時也會發出事件。

這是此 API 的第一個版本，因此它將在接下來的幾個 Electron 版本中不斷發展。請查看發布說明以取得進一步更新，並針對任何問題或遺失的功能開啟 issue。

您可以使用 npm install electron@beta 安裝此版本，並在 TouchBar 和 BrowserWindow Electron 文件中了解更多資訊。

非常感謝 @MarshallOfSound 為 Electron 貢獻此功能。🎉

Touch Bar 範例​

以下是在 touch bar 中建立一個簡單的老虎機遊戲的範例。它示範了如何建立 touch bar、設定項目的樣式、將其與視窗關聯、處理按鈕點擊事件，以及動態更新標籤。

const { app, BrowserWindow, TouchBar } = require('electron');

const { TouchBarButton, TouchBarLabel, TouchBarSpacer } = TouchBar;

let spinning = false;

// Reel labels
const reel1 = new TouchBarLabel();
const reel2 = new TouchBarLabel();
const reel3 = new TouchBarLabel();

// Spin result label
const result = new TouchBarLabel();

// Spin button
const spin = new TouchBarButton({
  label: '🎰 Spin',
  backgroundColor: '#7851A9',
  click: () => {
    // Ignore clicks if already spinning
    if (spinning) {
      return;
    }

    spinning = true;
    result.label = '';

    let timeout = 10;
    const spinLength = 4 * 1000; // 4 seconds
    const startTime = Date.now();

    const spinReels = () => {
      updateReels();

      if (Date.now() - startTime >= spinLength) {
        finishSpin();
      } else {
        // Slow down a bit on each spin
        timeout *= 1.1;
        setTimeout(spinReels, timeout);
      }
    };

    spinReels();
  },
});

const getRandomValue = () => {
  const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀'];
  return values[Math.floor(Math.random() * values.length)];
};

const updateReels = () => {
  reel1.label = getRandomValue();
  reel2.label = getRandomValue();
  reel3.label = getRandomValue();
};

const finishSpin = () => {
  const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size;
  if (uniqueValues === 1) {
    // All 3 values are the same
    result.label = '💰 Jackpot!';
    result.textColor = '#FDFF00';
  } else if (uniqueValues === 2) {
    // 2 values are the same
    result.label = '😍 Winner!';
    result.textColor = '#FDFF00';
  } else {
    // No values are the same
    result.label = '🙁 Spin Again';
    result.textColor = null;
  }
  spinning = false;
};

const touchBar = new TouchBar([
  spin,
  new TouchBarSpacer({ size: 'large' }),
  reel1,
  new TouchBarSpacer({ size: 'small' }),
  reel2,
  new TouchBarSpacer({ size: 'small' }),
  reel3,
  new TouchBarSpacer({ size: 'large' }),
  result,
]);

let window;

app.once('ready', () => {
  window = new BrowserWindow({
    frame: false,
    titleBarStyle: 'hidden-inset',
    width: 200,
    height: 200,
    backgroundColor: '#000',
  });
  window.loadURL('about:blank');
  window.setTouchBar(touchBar);
});

建置 Electron 應用程式表示您只需要建立一個程式碼庫，並為一個瀏覽器進行設計，這非常方便。但是，由於 Electron 會隨著 Node.js 和 Chromium 的發布而保持最新，因此您也可以利用它們隨附的強大功能。在某些情況下，這消除了您之前可能需要在 Web 應用程式中包含的依賴項。

有許多功能，我們將在此處涵蓋一些作為範例，但如果您有興趣了解所有功能，您可以關注 Google Chromium 部落格 和 Node.js 變更記錄。您可以在 electronjs.org/#electron-versions 查看 Electron 使用的 Node.js、Chromium 和 V8 版本。

透過 V8 支援 ES6​

Electron 將 Chromium 的渲染函式庫與 Node.js 結合在一起。兩者共享相同的 JavaScript 引擎，V8。許多 ECMAScript 2015 (ES6) 功能已內建於 V8 中，這表示您可以在 Electron 應用程式中使用它們，而無需任何編譯器。

以下是一些範例，但您也可以使用類別（在嚴格模式下）、區塊作用域、promise、型別陣列等等。請查看 此列表，以取得關於 V8 中 ES6 功能的更多資訊。

箭頭函式

findTime () => {
  console.log(new Date())
}

字串插值

var octocat = 'Mona Lisa';
console.log(`The octocat's name is ${octocat}`);

新目標

Octocat() => {
  if (!new.target) throw "Not new";
  console.log("New Octocat");
}

// Throws
Octocat();
// Logs
new Octocat();

陣列包含

// Returns true
[1, 2].includes(2);

其餘參數

// Represent indefinite number of arguments as an array
(o, c, ...args) => {
  console.log(args.length);
};

Chromium 功能​

感謝 Google 和貢獻者在 Chromium 上所做的所有辛勤工作，當您建置 Electron 應用程式時，您也可以使用很棒的功能，例如（但不限於）

• MouseEvent.getModifierState()
• CSS.escape()
• Fetch API 串流

請隨時關注 Google Chromium 部落格，以了解新版本發布時的功能，您也可以在 這裡 檢查 Electron 使用的 Chromium 版本。

您對什麼感到興奮？​

在 Twitter 上透過 @ElectronJS 推文給我們，分享您最喜歡的 V8 或 Chromium 內建功能。