5 篇带有“功能”标签的文章

Electron 的 API 工作组 正在采用开放的征求意见 (RFC) 流程，以帮助引导 Electron 核心的更大更改。

为什么使用 RFC？​

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

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

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

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

它是如何工作的？​

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

简而言之，一旦向 electron/rfcs 存储库发出 PR，RFC 即被提议。提议的 RFC 变为

• 活跃，当 PR 合并到存储库的 main 分支中时，这意味着 Electron 维护者愿意在 electron/electron 中实现，或者
• 如果 PR 最终被拒绝，则为拒绝。

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

谁可以参与？​

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 计划于今年晚些时候发布的新 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 硬件尚未商业上市。如果您有 开发者过渡套件，您可以在其上测试您的应用程序。否则，您将不得不等待生产 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。

应用内购买允许直接从应用程序内购买内容或订阅。这为开发者提供了一种简单的方式来拥抱 免费增值商业模式，用户无需付费即可下载应用程序，并为高级功能、附加内容或订阅提供可选的应用内购买。

新的 API 由社区贡献者 Adrien Fery 添加到 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 触控栏的初始支持。

新的触控栏 API 允许您添加按钮、标签、弹出窗口、颜色选择器、滑块和空格符。这些元素可以动态更新，并且在与之交互时也会发出事件。

这是此 API 的第一个版本，因此它将在接下来的几个 Electron 版本中不断发展。请查看发行说明以获取进一步的更新，并为任何问题或缺少的功能打开 issues。

您可以通过 npm install electron@beta 安装此版本，并在 TouchBar 和 BrowserWindow Electron 文档中了解更多信息。

非常感谢 @MarshallOfSound 为 Electron 贡献了此功能。🎉

触控栏示例​

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

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