5 篇博文 含有标签「功能」

Electron 的 API 工作组 正在采用开放的 征求意见 (RFC) 流程来帮助引导更大的变更 到 Electron core。

为什么要使用 RFC？​

简而言之，我们希望顺利完成 Electron core 重大变更的落地过程。

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

对于更重大的变化-例如，大型 API 或会影响大多数 Electron 应用程序的破坏性更改，在 构思阶段进行审查是有意义的。

这个过程旨在对公众开放，这也将使得广大 开源社区能够在这些变化落实到 Electron之前，更容易地提供反馈。

它是如何工作的？​

整个 RFC（请求评论）过程托管在 GitHub 上的 electron/rfcs 仓库中。 步骤在仓库的 README 中有详细描述。

简而言之，一旦向 electron/rfcs 仓库提交了 PR，一个 RFC 就被提出了。 一个被提出的 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 APIs
• Preload Realm for Service Workers

致谢​

Electron 的 RFC 流程借鉴了许多已建立的开源 RFC 流程。 许多想法和主要文案的灵感来源于：

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

随着苹果芯片将于今年晚些时候发布，您如何让Electron应用程序在新硬件上运行？

随着Electron 11.0.0-beta.1的发布，Electron团队现在正在编写在苹果计划于今年晚些时候发货的新苹果芯片上运行的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 是苹果最近一次对他们的 Rosetta 技术的迭代。 允许您在新的 arm64 Apple Silicon 硬件上运行 x64 Intel 应用。 虽然我们相信x64 Electron应用程序将在Rosetta 2下运行，但有一些重要的事情需要注意（以及您应该发布原生arm64二进制文件的原因）。

• 您的应用的性能将明显下降。 Electron / V8 为 JavaScript 使用 JIT 编译，因为 Rosetta 工作的原理。 您实际上将运行两次JIT (一次在 V8 中，一次在 Rosetta)。
• 您失去了如内存页面大小的增加这样的 Apple Silicon 新技术的好处。
• 我们是否提到性能将显著 降级？

The new Electron 2.0 release line is packed with new features and fixes. One of the highlights from this new major version is a new inAppPurchase API for Apple's Mac App Store.

In-app purchases enable content or subscriptions to be purchased directly from within apps. This gives developers an easy way to embrace the freemium business model, wherein users pay nothing to download an app and are offered optional in-app purchases for premium features, additional content, or subscriptions.

The new API was added to Electron by community contributor Adrien Fery to enable in-app purchases in Amanote, a note-taking Electron app for lectures and conferences. Amanote is free to download and allows clear and structured notes to be added to PDFs, with features like mathematical formulae, drawings, audio recording, and more.

Since adding in-app purchase support to the Mac version of Amanote, Adrien has noted a 40% increase in sales!

入门指南​

The new inAppPurchase API has already landed in the latest Electron beta:

npm i -D electron@beta

The docs for the API can be found on GitHub, and Adrien has been kind enough to write a tutorial on how to use the API. To get started adding in-app purchases to your app, see the tutorial.

More improvements to the API are in the works, and will soon be landing in an upcoming Electron beta release.

Windows Could Be Next​

Up next, Adrien is hoping to open a new revenue channel for Amanote by adding support for Microsoft Store in-app purchases in Electron. Stay tuned for developments on that!

Electron 1.6.3 beta 版本包含对macOS Touch Bar 的初始支持。

The new Touch Bar API allows you to add buttons, labels, popovers, color pickers, sliders, and spacers. These elements can be dynamically updated and also emit events when they are interacted with.

This is the first release of this API so it will be evolving over the next few Electron releases. Please check out the release notes for further updates and open issues for any problems or missing functionality.

You can install this version via npm install electron@beta and learn more about it in the TouchBar and BrowserWindow Electron docs.

Big thanks to @MarshallOfSound for contributing this to Electron. 🎉

Touch Bar Example​

Below is an example of creating a simple slot machine game in the touch bar. It demonstrates how to create a touch bar, style the items, associate it with a window, handle button click events, and update the labels dynamically.

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

Building an Electron application means you only need to create one codebase and design for one browser, which is pretty handy. But because Electron stays up to date with Node.js and Chromium as they release, you also get to make use of the great features they ship with. In some cases this eliminates dependencies you might have previously needed to include in a web app.

There are many features and we'll cover some here as examples, but if you're interested in learning about all features you can keep an eye on the Google Chromium blog and Node.js changelogs. You can see what versions of Node.js, Chromium and V8 Electron is using at electronjs.org/#electron-versions.

ES6 Support through V8​

Electron combines Chromium's rendering library with Node.js. The two share the same JavaScript engine, V8. Many ECMAScript 2015 (ES6) features are already built into V8 which means you can use them in your Electron application without any compilers.

Below are a few examples but you can also get classes (in strict mode), block scoping, promises, typed arrays and more. Check out this list for more information on ES6 features in V8.

Arrow Functions

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

String Interpolation

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 Features​

Thanks to all the hard work Google and contributors put into Chromium, when you build Electron apps you can also use cool things like (but not limited to):

• MouseEvent.getModifierState()
• CSS.escape()
• Fetch API Streaming

Follow along with the Google Chromium blog to learn about features as new versions ship and again, you can check the version of Chromium that Electron uses here.

What are you excited about?​

Tweet to us @ElectronJS with your favorite features built into V8 or Chromium.