5 篇带有“特性”标签的文章

Electron 的 API 工作组 正在采用开放的 Requests for Comments (RFC) 流程，以帮助引导 Electron 核心的较大变更。

为什么使用 RFC？​

简而言之，我们希望简化 Electron 核心重大变更的流程。

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

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

此流程旨在向公众开放，这也将使更广泛的开源社区更容易在潜在变更进入 Electron 之前提供反馈。

它是如何运作的？​

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

简而言之，一旦将 PR 提交到 electron/rfcs 仓库，RFC 就会被提议。提议的 RFC 变为

• 活跃，当 PR 合并到仓库的 main 分支中时，这意味着 Electron 维护者可以接受 electron/electron 中的实现，或者
• 已拒绝，如果 PR 最终被拒绝。

如果实现已合并到 electron/electron 中，则活动的 RFC 将完成。

谁可以参与？​

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

• 要查看活动的 RFC 列表，请参阅 仓库中的 text 文件夹。
• 要在提议的 RFC 上留下反馈，请查看 打开的 PR 列表。
• 要提交新的 RFC，请查看 repo 的 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 计划在今年晚些时候发布的新 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 硬件上运行，在撰写此博客文章时，该硬件尚未商业销售。如果你有 Developer Transition Kit，你可以在其上测试你的应用程序。否则，你将必须等待生产 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 发布系列 包含 许多新功能和修复。此新主要版本的一个亮点是 Apple 的 Mac App Store 的新 inAppPurchase API。

应用内购买使内容或订阅可以直接从应用内购买。这使开发人员可以轻松地采用 免费增值业务模型，用户无需付费即可下载应用，并提供可选的应用内购买以获取高级功能、其他内容或订阅。

社区贡献者 Adrien Fery 将新 API 添加到 Electron，以在 Amanote 中启用应用内购买，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 版本中不断发展。请查看发行说明以获取进一步更新，并打开 问题 以解决任何问题或缺少的功能。

你可以通过 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 应用程序中使用它们，而无需任何编译器。

下面是一些例子，但你也可以使用类（在严格模式下）、块作用域、Promises、类型数组等等。查看 此列表 以获取有关 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);

剩余参数

// 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 内置功能。