Skip to main content

添加功能

按照教程进行操作

这是 Electron 教程的第 4 部分。

¥This is part 4 of the Electron tutorial.

  1. 先决条件

    ¥Prerequisites

  2. 构建你的第一个应用

    ¥Building your First App

  3. 使用预加载脚本

    ¥Using Preload Scripts

  4. 添加功能

    ¥Adding Features

  5. 打包你的应用

    ¥Packaging Your Application

  6. 发布与更新

    ¥Publishing and Updating

增加应用的复杂性​

¥Adding application complexity

如果你一直在关注，你应该拥有一个具有静态用户界面的功能性 Electron 应用。从这个起点开始，你通常可以在两个主要方向上开发应用：

¥If you have been following along, you should have a functional Electron application with a static user interface. From this starting point, you can generally progress in developing your app in two broad directions:

  1. 增加渲染器进程的 Web 应用代码的复杂性

    ¥Adding complexity to your renderer process' web app code

  2. 与操作系统和 Node.js 更深入的集成

    ¥Deeper integrations with the operating system and Node.js

理解这两个广泛概念之间的区别很重要。对于第一点，Electron 特定的资源不是必需的。在 Electron 中构建一个漂亮的待办事项列表只需将你的 Electron BrowserWindow 指向一个漂亮的待办事项列表 Web 应用。最终，你将使用与在 Web 上使用的相同工具（HTML、CSS、JavaScript）构建渲染器的 UI。因此，Electron 的文档不会深入探讨如何使用标准 Web 工具。

¥It is important to understand the distinction between these two broad concepts. For the first point, Electron-specific resources are not necessary. Building a pretty to-do list in Electron is just pointing your Electron BrowserWindow to a pretty to-do list web app. Ultimately, you are building your renderer's UI using the same tools (HTML, CSS, JavaScript) that you would on the web. Therefore, Electron's docs will not go in-depth on how to use standard web tools.

另一方面，Electron 还提供了一组丰富的工具，允许你与桌面环境集成，从创建托盘图标到添加全局快捷方式到显示原生菜单。它还为你提供了主进程中 Node.js 环境的所有功能。这组功能将 Electron 应用与在浏览器选项卡中运行网站分开，并且是 Electron 文档的重点。

¥On the other hand, Electron also provides a rich set of tools that allow you to integrate with the desktop environment, from creating tray icons to adding global shortcuts to displaying native menus. It also gives you all the power of a Node.js environment in the main process. This set of capabilities separates Electron applications from running a website in a browser tab, and are the focus of Electron's documentation.

操作方法示例​

¥How-to examples

Electron 的文档有许多教程可以帮助你了解更高级的主题和更深入的操作系统集成。要开始使用，请查看 操作方法示例 文档。

¥Electron's documentation has many tutorials to help you with more advanced topics and deeper operating system integrations. To get started, check out the How-To Examples doc.

如果缺少什么，请告诉我们！

如果你找不到所需的内容，请在 GitHub 或 Discord 服务器 上告诉我们！

¥If you can't find what you are looking for, please let us know on GitHub or in our Discord server!

下一步是什么？​

¥What's next?

在本教程的其余部分中，我们将不再讨论应用代码，而是让你了解如何将应用从开发者计算机转移到终端用户手中。

¥For the rest of the tutorial, we will be shifting away from application code and giving you a look at how you can get your app from your developer machine into end users' hands.