作者选择Apache 软件基金会作为Write for DOnations计划的一部分接受捐赠。

介绍

Electron是一个开源框架，用于使用 JavaScript、HTML 和 CSS 等 Web 技术创建本机应用程序。它结合了对在 Mac、Windows 和 Linux 上跨平台构建和运行应用程序的支持。许多流行的桌面应用程序都是使用 Electron 构建的，例如 Visual Studio Code、WhatsApp、Twitch、Slack 和 Figma。

Electron 有助于设计更复杂的应用程序功能，例如自动更新或本机菜单，这意味着开发人员可以专注于应用程序的核心设计。此外，Electron 是一个由 GitHub 维护的开源项目，拥有活跃的贡献者社区。

在本教程中，您将首先设置一个项目并安装 Electron。之后，您将创建您的第一个“Hello World！” 使用 Electron 的应用程序并对其进行自定义。您将实现优雅的窗口设置并为应用程序创建新窗口。完成所有这些步骤后，您将在 macOS 上拥有一个 Electron 跨平台桌面应用程序。

先决条件

要完成本教程，您需要：

• Node.js 安装在您的机器上和 macOS 上的本地开发环境。按照如何在 macOS 上安装 Node.js 和创建本地开发环境教程进行操作。

注意：本教程在 macOS 10.15.3 上进行了测试。

步骤 1 — 创建项目

首先，您要将 Electron 安装到您的机器上并创建项目文件夹以构建桌面应用程序。

要开始 Electron 安装过程，请创建名为的项目文件hello-world夹并使用以下命令导航到该文件夹​​：

mkdir hello-world
cd hello-world

接下来，您将通过创建package.json文件来启动您的项目。

该package.json文件是 Node.js 应用程序的重要组成部分，它执行以下操作：

• 列出您的项目所依赖的包。
• 指定您的项目可以使用的包版本。

要创建package.json文件，请运行以下命令：

npm init

你会被问到一系列问题，从包名开始。您可以使用默认应用程序名称hello-world, 作为您的包名称。

然后它会询问版本。要使用默认的 v1.0.0，请按ENTER。

之后，它要求描述。在那里您可以添加对项目的描述，例如：hello world application on Electron.js。

接下来，对于入口点，输入main.js。

在应用程序初始运行时调用的文件称为入口点。在这种情况下，main.js是package.json文件的入口点。

对于剩下的问题，用 接受默认值ENTER。

注意：在本教程中，我们将作者和许可证留空，但您可以根据项目状态使用您的名字和姓氏作为作者。您的软件包的许可证指定了如何允许其他人使用该应用程序，以及您对其施加的任何限制。最常见的许可证是：MIT、BSD-2-Clause和ISC。有关更多详细信息，请查看SPDX 许可证 ID的完整列表。从那里您可以为您的项目使用首选许可证，但这不是强制性的。

按照提示操作后，您将收到以下输出：

Output:
. . .
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (hello-world)
version: (1.0.0)
description: hello world application on Electron.js
entry point: (index.js) main.js
test command:
git repository:
keywords:
author:
license: (ISC)

之后，系统会要求您确认配置：

Output:
About to write to /hello-world/package.json:

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "hello world application on Electron.js",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this OK? (yes)

您现在将在项目目录中拥有新生成的package.json文件hello-world。接下来，您将安装 Electron。

第 2 步 – 安装 Electron

现在你将实现package.json文件的配置并安装 Electron。

为此，请package.json在您首选的文本编辑器中打开该文件：

nano package.json

在scripts对象内添加以下突出显示的行：

{
  "name": "hello-world",  "version": "1.0.0",
  "description": "hello world application on Electron.js",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
 },
  "author": "",
  "license": "ISC"
}

该scripts属性采用具有所需数量的键/值对的对象。这些键/值对中的每一个键都是可以运行的命令的名称。每个key对应的值就是实际可以运行的命令。脚本经常用于测试、构建和简化所需命令。

在此项目中，您将start用作键和electron .值。

完成后，保存并退出文件。

接下来，您将在项目中安装 Electron 作为开发依赖项。在您的hello-world项目目录中运行以下命令：

npm install --save-dev electron

成功将 Electron 依赖安装到您的项目后，该package.json文件将类似于：

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "hello world application on Electron.js",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.2.1"
  }
}

依赖属性采用一个对象，该对象具有每个依赖项的名称和版本。

有两个依赖属性dependencies，并devDependencies可以用一个关键的区别来识别。该dependencies属性用于定义模块在生产中运行所需的依赖项。该devDependencies属性通常用于定义模块在开发中运行所需的依赖项。要将软件包安装为在命令中devDependencies使用--save-dev标志。

你已经在你的机器上安装了 Electron 并创建了项目文件夹来构建你的应用程序。现在您将hello-world使用 Electron 框架编写您的第一个应用程序。

第 3 步 — 编写“Hello World！” 应用

让我们开始编写您的第一个 Electron 应用程序。

Electron 使用两种类型的进程运行：主进程（服务器端）和渲染器进程（客户端）。Electron 主进程在 Node.js 运行时上运行。

为此，您将使用两个文件：main.js和index.html.

main.js是你的应用程序的主进程，index.html也是你的 Electron 应用程序渲染器进程。

hello-world
+-- package.json
+-- main.js
+-- index.html

接下来，我们创建一个手动浏览器窗口并使用Electron API调用加载内容，您可以使用它来执行 HTML、CSS、JavaScript 等。

首先打开你的main.js文件：

nano main.js

然后添加以下代码行来实现该BrowserWindow模块：

const { app, BrowserWindow } = require('electron')

这包含两个称为and 的解构赋值，这是 Electron 模块所必需的。该模块用于在您的 Electron 应用程序中创建一个新窗口。appBrowserWindowBrowserwindow

接下来，将以下代码添加到您的main.js文件中：

. . .
function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })

  mainWindow.loadFile('index.html')
}

app.whenReady().then(createWindow)

您将一个 ElectroncreateWindow函数添加到您的hello-world应用程序中。在此函数中，您创建new BrowserWindow渲染器进程并传递width和height参数。宽度和高度将设置应用程序窗口大小。

该mainWindow.loadFile()方法将一些内容呈现到BrowserWindow. 该index.html文件将加载内容。

当app.whenReady().then(windowName)方法准备好时，将启动主进程。此时，主进程调用该createWindow函数。此函数创建一个新的渲染器进程或浏览器窗口实例，宽度为 800 像素，高度为 600 像素。然后渲染器进程继续使用mainWindow.loadFile('index.html')方法加载内容。在本教程中，您使用index.html作为文件名。

接下来将以下事件代码添加到您的文件中：

. . .
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

您将两个主要系统事件添加到项目中 –window-all-closed和activate事件：

• window-all-closed：当所有窗口都关闭时退出应用程序。在 macOS 上，应用程序及其菜单栏通常会保持活动状态，直到用户使用CMD+明确退出Q。
• activate：各种操作都可以触发此事件，例如首次启动应用程序、尝试在应用程序已经运行时重新启动应用程序、或单击应用程序的停靠栏 (macOS) 或任务栏图标。

添加这些代码块后，main.js文件的最终输出将类似于：

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })

  mainWindow.loadFile('index.html')

}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

完成后，保存并退出该文件。

接下来，创建并打开index.html文件：

nano index.html

添加以下代码，该代码作为最终输出发送：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body
    <h1>Hello World!</h1>
  </body>
</html>

在这里，您将创建一个静态 HTML 网页。Electron 应用程序渲染器进程支持所有 HTML 语法，因为 Electron 使用 Chromium 进行渲染。

现在你已经完成了，你可以运行你的应用程序：

npm start

您将获得一个应用程序窗口作为输出。

您已经使用 Electron 框架创建了您的第一个跨平台应用程序。接下来，您将使用一些自定义项，您可以添加这些自定义项以实现交互。

第 4 步 — 自定义您的“Hello World!”应用程序

现在您已经使用 Electron 框架完成了第一个跨平台应用程序的初始设置。让我们看看您还可以做些什么来改进应用程序的本机行为。

Electron 具有许多内置功能，例如对话框、窗口选项、新窗口、菜单、快捷方式、通知、触摸条、会话控件等，可以改善桌面应用程序的用户体验。让我们添加一些功能来自定义hello-world应用程序。

应用程序的优雅窗口设置

当您直接将页面加载到窗口中时，在应用程序启动时，您可能会看到页面没有立即加载。这在本机应用程序中不是很好的体验。让我们通过几个步骤来解决这个问题。

为此，您需要BrowserWindow通过在创建时传递新的配置参数来隐藏它。

为此，打开main.js文件：

nano main.js

将show: false参数添加到BrowserWindow对象的主体：

const mainWindow = new BrowserWindow({
   width: 800,
   height: 600,
   show: false
 })

接下来，您将BrowserWindow通过在createWindow函数体内添加突出显示的代码行来向实例添加一个新侦听器。您还将向 中添加新的配置参数BrowserWindow以更改最初构建的窗口的背景颜色。

为此，您必须backgroundColor在BrowserWindow函数内添加以下对象代码行。随意更改十六进制颜色代码。

backgroundColor: '#Your hex color code'

将此行（如以下突出显示的代码）添加到您的createWindow函数中：

function createWindow () {
 const mainWindow = new BrowserWindow({
   width: 800,
   height: 600,
   show: false,
   backgroundColor: '#ffff00'
 })
 mainWindow.loadFile('index.html')

 mainWindow.once('ready-to-show', mainWindow.show)

}

为了减少垃圾收集，您需要使用once关键字执行此侦听器一次。因此，该mainWindow.show方法仅在此应用程序运行时执行一次。

现在保存您的文件并使用终端运行您的应用程序：

npm start

您的应用程序将以黄色背景显示。

最后，您将看到应用程序窗口正常加载。

为应用程序创建一个新窗口

使用多个窗口是基本到高级应用程序的一个共同特征。让我们将该功能添加到您新创建的应用程序中。

Electron 可以从单个主进程创建多个渲染器进程（多个窗口）。

首先，打开main.js：

nano main.js

通过添加突出显示的代码，创建一个名为的新方法secWindow并设置新创建的窗口的width和height参数：

function createWindow () {
const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  show: false,
  backgroundColor: '#ffff00'
})

const secWindow = new BrowserWindow({
  width: 600,
  height: 400,
 })
. . .
}

现在将内容加载到新创建的BrowserWindow渲染器进程。此时，您将加载一些远程 URL（网站）内容。

在本教程中，您将https://www.digitalocean.com在应用程序的第二个窗口中使用Web 内容。为此，在第二个窗口初始化中secWindow.loadURL，将以下代码行添加到createWindow函数体：

 function createWindow () {
 const mainWindow = new BrowserWindow({
   width: 800,
   height: 600,
   show: false,
   backgroundColor: '#ffff00'
 })

const secWindow = new BrowserWindow({
   width: 600,
   height: 400,
 })

 mainWindow.loadFile('index.html')

 secWindow.loadURL('https://www.digitalocean.com/')

 mainWindow.once('ready-to-show', mainWindow.show)
}

现在保存并退出您的文件并在终端中运行您的应用程序：

npm start

您将获得带有黄色背景的初始窗口和带有已加载 URL 的新应用程序。

您已经对新创建的应用程序进行了自定义，以使其对用户更具交互性。现在是时候构建您的 Electron 应用程序了。

步骤 5 — 构建您的第一个应用程序

在向您的应用程序添加一些功能后，您需要构建它以进行分发。在本节中，您将学习如何为各种平台构建应用程序。

Electron 应用程序的构建过程被认为有些困难，因为它需要很多工具。但是，在这里您将使用electron-builderCLI 工具，该工具提供了为任何平台构建应用程序的最佳方式。

首先，您将electron-builder全局安装CLI 工具。为此，请运行以下命令：

sudo npm install -g electron-builder

注意：您可以使用npm或yarn进行安装electron-builder– 性能上没有明显差异。如果您打算长期开发您的应用程序，制造商electron-builder建议yarn避免潜在的兼容性问题。要使用 安装yarn，您需要确保它已安装在您的计算机上，然后运行yarn add electron-builder --dev以electron-builder使用进行安装yarn。

安装完成后electron-builder，您可以通过在终端中运行以下命令来验证它是否成功：

electron-builder --version

您将在输出中收到当前版本的 Electron。

现在您可以构建您的第一个跨平台应用程序。为此，请打开终端并在项目目录中运行以下命令：

electron-builder -mwl

您可以使用这些标志-mwl分别为 macOS、Windows 和 Linux 构建应用程序。

注意：只有 macOS 用户可以为所有平台构建。Windows 用户只能为 Windows 和 Linux 平台构建应用程序。Linux 用户只能为 Linux 平台构建。有关更多详细信息，您可以参考文档。

要为单独的操作系统构建应用程序，请使用以下内容：

构建应用程序macOS：

electron-builder --mac

构建应用程序 Windows:

electron-builder --win

构建应用程序Linux：

electron-builder --linux

在下载依赖项和构建应用程序时，此过程需要一些时间。

您的项目目录会创建一个名为dist. 您构建的所有应用程序和应用程序的解压缩版本都位于该文件夹中。

例如，如果您为所有平台构建应用程序，您的项目dist文件夹类似于以下文件结构：

hello-world
  +-- hello-world-1.0.0-mac.zip
  +-- hello-world-1.0.0.dmg
  +-- hello-world Setup 1.0.0.exe
  +-- win-unpacked
  +-- mac
  +-- linux-unpacked
  +-- hello-world_1.0.0_amd64.snap

electron-builder 为当前平台和当前架构构建 Electron 应用程序作为默认目标。

• macOS：用于 Squirrel.Mac 的 DMG 和 ZIP
• Windows：NSIS (.exe)
• Linux：如果您在 Windows 或 macOS 上构建，则 Snap 和 AppImage forx64将是输出。否则，如果您在 Linux 上构建，输出将是当前架构的 Snap 和 AppImage 文件。

您现在已经为所有平台构建了应用程序。

结论

在本教程中，您使用 Electron 框架创建了您的第一个跨平台应用程序，添加了本机功能，并在 macOS 上构建了用于分发的应用程序。

要了解有关 Electron 的更多信息，您可以查看他们的文档。现在，您还可以通过创建安装程序与任何人共享您新创建的桌面应用程序。