跳转到主内容

基本要求

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 ChromiumNode.js 嵌入到了一个二进制文件中,因此它允许你仅需一个代码仓库,就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。

本教程将指导您使用 Electron 开发一个桌面应用,并将其分发给终端用户。

目标

本教程首先指导您完成从头开始拼凑一个最小的 Electron 应用程序的过程,然后教您如何使用 Electron Forge 打包并将其分发给用户。

如果您希望从单命令样板开始项目,我们建议您使用 Electron Forge 的 create-electron-app 命令。

前言

Electron 是网页应用 (web apps) 的一个原生包装层,在 Node.js 环境中运行。 因此,本教程假设您已经对 Node.js 和前端 Web 开发有一定地了解。 如果您还需要了解一些背景知识,我们推荐您阅读:

所需工具

代码编辑器

您需要一个文本编辑器来编写代码。 我们推荐使用 Visual Studio Code (VS Code),不过您也可以选择自己喜欢的。

命令行工具

在整个教程中,我们将要求您使用各种命令行接口 (CLI) 。 您可以使用系统的默认命令行工具:

  • Windows: 命令提示符 / PowerShell
  • macOS: Terminal
  • Linux: 视发行版决定 (如 GNOME 终端 Konsole)

大多数代码编辑器也内置了终端,您也可以使用它们。

Git 和 GitHub

Git 是常用的版本控制系统,GitHub 是一个基于它的协作开发平台。 虽然它们对开发 Electron 应用而言不是必需的,但我们在后续教程中会使用 GitHub Releases 来实现软件的自动更新。 因此,我们建议您:

如果您对 Git 还不熟悉,我们推荐阅读 GitHub 的 Git 指南 。 如果您喜欢可视化界面而不是命令行,也可以使用 GitHub Desktop

我们建议您创建一个本地 Git 仓库,在阅读教程之前将其推送到 GitHub,并且在完成教程各个步骤后将代码提交上去。

通过 GitHub Desktop 安装 Git

如果您的操作系统中没有安装 Git,GitHub Desktop 会自动帮您安装 Git 最新版本。

Node.js 和 npm

要开发 Electron 应用,您需要安装 Node.js 运行环境和它的包管理器 npm。 我们推荐安装最新的长期支持 (LTS) 版本。

提示

请使用为你平台预构建的 Node.js 安装器来进行安装, 否则,您可能会遇到与不同开发工具不兼容的问题。 如果您使用 macOS,我们推荐使用如 Homebrewnvm 这样的包管理器,来避开读写目录权限问题。

要检查 Node.js 是否已被安装,您可以在运行 nodenpm 命令时,加上 -v 参数。 如果已安装,它们应当会输出对应的版本。

$ node -v
v16.14.2
$ npm -v
8.7.0
caution

虽然您需要在开发环境安装 Node.js 才能编写 Electron 项目,但是 Electron 不使用您系统的 Node.js 环境来运行它的代码。 相反地,它使用它内置的 Node.js 运行时。 这意味着您的终端用户不需要 Node.js 环境也可以运行您的应用。

要查看您应用内置的 Node.js 版本,您可以访问主进程 (main process) 或预加载脚本 (preload script) 中的 process.versions 变量。 您也可以参考 electron/releases 仓库中的版本列表。