带有“Features”标签的5篇文章

Electron的 API工作组正在采用开放的请求评论 (RFC)流程，以帮助推动Electron核心的较大变更。

为什么使用RFC？​

简而言之，我们希望能够顺利地将重大变更引入 Electron 核心。

目前，新的代码变更主要通过 GitHub 上的问题和拉取请求进行讨论。对于 Electron 的大多数变更而言，这是一个不错的系统。许多错误修复、文档变更，甚至新功能都足够直接，可以通过标准 GitHub 流程异步审查和合并。

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

此流程被设计为向公众开放，这也将使广大的开源社区更容易在潜在变更进入 Electron 之前对其提供反馈。

它是如何工作的？​

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

简而言之，一旦向 electron/rfcs 仓库提交了 PR，一个 RFC 就进入了提案（Proposed）阶段。一个提案中的 RFC 会进入

• 激活（Active）状态，当该 PR 被合并到仓库的 main 分支时，这意味着 Electron 维护者们同意在 electron/electron 中实现该提案，或者
• 拒绝（Declined）状态，如果该 PR 最终被拒绝。

一个激活状态的 RFC 在其实现被合并到 electron/electron 后，将进入完成（Completed）状态。

谁可以参与？​

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

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

我们希望这个过程是一个双向对话，并鼓励社区参与，以从未来可能使用这些 API 的 Electron 应用程序中获得各种意见。如果您有兴趣对当前提议的 RFC 发表反馈意见，Electron 维护者已经创建了一些

• Electron C API
• 用于 Service Worker 的 Preload Realm

鸣谢​

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构建版本。您可以从我们的 发布网站 获取最新的beta版本，或使用 npm install electron@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 使用 JIT 编译 JavaScript，由于Rosetta的工作方式，您实际上将两次运行JIT（一次在V8中，一次在Rosetta中）。
• 您将失去 Apple Silicon 中新技术带来的好处，例如更大的内存页大小。
• 我们有没有提到过性能会显著下降？

全新的 Electron 2.0 版本系列包含了许多新特性和修复。这个主要版本的一个亮点是新的 inAppPurchase API，用于 Apple 的 Mac App Store。

应用内购买允许用户直接在应用程序内购买内容或订阅。这为开发者提供了一种简单的方式来采用 免费增值商业模式，用户可以免费下载应用程序，并可以选择购买高级功能、额外内容或订阅。

这个新的 API 是由社区贡献者 Adrien Fery 添加到 Electron 中的，用于在 Amanote 中启用应用内购买，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 版本中它将不断发展。请查看发布说明以获取进一步的更新，并在 issues 中提交任何问题或缺失的功能。

您可以通过 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 changelogs。您可以在 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();

数组包含

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

Rest 参数

// 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版本。

您对什么感到兴奋？​

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