5 篇标记为“Features”的帖子

Electron 的 API 工作组 正在采用开放的 征求意见稿 (RFC) 流程，以协助管理 Electron 核心的重大变更。

为什么采用 RFC？​

简而言之，我们希望简化将重大变更落地到 Electron 核心的过程。

目前，新的代码更改主要通过 GitHub 上的 issue 和 pull request 进行讨论。对于 Electron 的大多数更改来说，这是一个很好的系统。许多 bug 修复、文档更改，甚至新功能都足够直接，可以通过标准的 GitHub 工作流进行异步审查和合并。

对于更重大的更改——例如，大型 API 表面或会影响大多数 Electron 应用的破坏性更改——在大部分代码编写之前在构思阶段进行审查是有意义的。

这个过程设计为对公众开放，这也使得整个开源社区更容易在潜在更改落地到 Electron 之前提供反馈。

它是如何运作的？​

整个 RFC 流程都在 GitHub 的 electron/rfcs 仓库中。详细步骤在仓库的 README 中描述。

简而言之，一旦向 electron/rfcs 仓库提交 PR，一个 RFC 就处于提议中 (Proposed) 状态。提议中的 RFC 会变为

• 活跃 (Active) 状态，当 PR 合并到仓库的 main 分支时，这意味着 Electron 维护者同意在 electron/electron 中进行实现，或者
• 被拒绝 (Declined)，如果 PR 最终被驳回。

如果实现在 electron/electron 中合并，一个活跃的 RFC 则为完成 (Completed) 状态。

谁可以参与？​

Electron 社区中的任何人都可以提交 RFC 或在 electron/rfcs 仓库中留下反馈！

• 要查看活跃的 RFC 列表，请参阅 仓库中的 text 文件夹。
• 要对提议中的 RFC 留下反馈，请查看 开放的 PR 列表。
• 要提交新的 RFC，请查看仓库的 README 和 RFC 模板。

我们希望将此过程变为双向对话，并鼓励社区参与，以便从将来可能使用这些 API 的 Electron 应用中获取多样化的意见。如果您有兴趣对当前提议中的 RFC 留下反馈，Electron 维护者已经创建了一些

• Electron C API
• Service Workers 的预加载域

鸣谢​

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 Silicon 硬件上运行的 Electron 构建版本。您可以通过 npm install electron@beta 获取最新的 beta 版本，或直接从我们的 发布版本网站 下载。

它是如何运作的？​

从 Electron 11 开始，我们将为 Intel Mac 和 Apple Silicon Mac 发布不同的 Electron 版本。在此更改之前，我们已经发布了两个构件 (artifact)，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 已经支持 targeting arm64 架构。只要您运行的是这些包的最新版本，一旦您将目标架构更新为 arm64，您的应用应该就能完美运行。

将来，我们将发布一个包，允许您将 arm64 和 x64 应用“合并”为一个通用二进制文件，但值得注意的是，这个二进制文件将会非常大，可能不适合分发给用户。

更新：此包现已在 @electron/universal 提供。您可以使用它将两个打包好的 x64 和 arm64 应用合并为一个二进制文件。

潜在问题​

原生模块​

由于您正在 targeting 新架构，您需要更新一些依赖项，这可能会导致构建问题。下面列出了某些依赖项的最低版本供您参考。

由于这些依赖项的版本要求，您可能需要修复/更新某些原生模块。值得注意的是，Xcode 升级将引入新版本的 macOS SDK，这可能导致您的原生模块构建失败。

我如何测试？​

目前，Apple Silicon 应用只能在 Apple Silicon 硬件上运行，而在撰写本文时该硬件尚未商业上市。如果您有 开发者过渡套件 (Developer Transition Kit)，您可以在其上测试您的应用。否则，您必须等到生产型 Apple Silicon 硬件发布后才能测试您的应用是否正常工作。

Rosetta 2 呢？​

Rosetta 2 是苹果 Rosetta 技术的最新迭代，它允许您在新 arm64 Apple Silicon 硬件上运行 x64 Intel 应用。虽然我们相信 x64 Electron 应用可以在 Rosetta 2 下运行，但有一些重要事项需要注意（以及为什么您应该发布原生 arm64 二进制文件的原因）。

• 您的应用性能将显著降低。Electron / V8 使用 JIT（即时编译）来编译 JavaScript，由于 Rosetta 的工作方式，您实际上会运行两次 JIT（一次在 V8 中，一次在 Rosetta 中）。
• 您将失去 Apple Silicon 中新技术带来的好处，例如更大的内存页面大小。
• 我们有没有提到性能会显著降低？

新的 Electron 2.0 发布版本 包含了 许多新特性和修复。这个新主要版本的一个亮点是为苹果的 Mac App Store 提供了新的 inAppPurchase API。

内购 (In-app purchases) 使得可以直接在应用内购买内容或订阅。这为开发者提供了一种轻松拥抱 免费增值商业模式 (freemium business model) 的方式，用户无需付费即可下载应用，然后可以选择性地购买高级功能、附加内容或订阅。

新的 API 由社区贡献者 Adrien Fery 添加到 Electron 中，以便在 Amanote（一款用于讲座和会议的 Electron 笔记应用）中启用内购。Amanote 可免费下载，并允许将清晰、有条理的笔记添加到 PDF 中，支持数学公式、绘图、录音等功能。

自从为 Mac 版 Amanote 添加内购支持以来，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 示例​

下面是一个在触控条中创建一个简单的老虎机游戏的示例。它演示了如何创建触控条、设置项目样式、将其与窗口关联、处理按钮点击事件以及动态更新标签。

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

New Target

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

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

Array Includes

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

Rest Parameters

// 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 Streaming

关注 Google Chromium 博客 以了解新版本发布时的特性，再次提醒，您可以在 这里 查看 Electron 使用的 Chromium 版本。

您对哪些特性感到兴奋？​

在 Twitter 上向我们 @ElectronJS 发送推文，分享您最喜欢的 V8 或 Chromium 内置特性。