作者选择了 Apache Software Foundation以作为 Write for Donations计划的一部分接收捐款。

介绍

Electron是一个开源框架,用于创建基于Web技术的原生应用程序,如JavaScript,HTML和CSS. 它结合了在Mac,Windows和Linux上构建和运行跨平台应用程序的支持。

Electron有助于设计更复杂的应用程序功能,如自动更新或原生菜单,这意味着开发人员可以专注于他们的应用程序的核心设计。

在本教程中,您将首先设置一个项目并安装Electron。之后,您将使用Electron创建您的第一个Hello World!应用程序并定制它。您将实施优雅的窗口设置并为应用程序创建新的窗口。

前提条件

要完成本教程,您将需要:

Node.js 安装在您的计算机和 macOS 上的本地开发环境中。遵循如何在 macOS 上安装 Node.js 和创建本地开发环境教程。

注意:本教程已在 macOS 10.15.3 上测试。

步骤1 - 创建项目

首先,您将安装电子到您的机器,并创建项目文件夹来构建桌面应用程序。

要启动Electron安装过程,请创建名为hello-world的项目文件夹,并使用以下命令导航到该文件夹:

1mkdir hello-world
2cd hello-world

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

package.json文件是 Node.js 应用程序不可或缺的一部分,它执行以下操作:

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

若要创建 package.json 文件,请执行以下命令:

1npm 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的完整列表] (https://spdx.org/licenses/). 从这里您可以使用您的项目首选的许可证, 但这不是强制的。 < $ > (美元)

遵循提示后,您将收到以下输出:

 1[secondary_label Output:]
 2. . .
 3Use `npm install <pkg>` afterwards to install a package and
 4save it as a dependency in the package.json file.
 5Press ^C at any time to quit.
 6package name: (hello-world)
 7version: (1.0.0)
 8description: hello world application on Electron.js
 9entry point: (index.js) main.js
10test command:
11git repository:
12keywords:
13author:
14license: (ISC)

之后,您将被要求确认配置:

 1[secondary_label Output:]
 2About to write to /hello-world/package.json:
 3
 4{
 5  "name": "hello-world",
 6  "version": "1.0.0",
 7  "description": "hello world application on Electron.js",
 8  "main": "main.js",
 9  "scripts": {
10    "test": "echo \"Error: no test specified\" && exit 1"
11  },
12  "author": "",
13  "license": "ISC"
14}
15
16Is this OK? (yes)

您现在将有新生成的 package.json 文件在您的 hello-world 项目目录中。

第2步:安装电子

现在,您将执行package.json文件的配置并安装Electron。

为此,请在您喜爱的文本编辑器中打开 package.json 文件:

1nano package.json

在脚本对象中添加以下突出的行:

 1[label package.json]
 2{
 3  "name": "hello-world",  "version": "1.0.0",
 4  "description": "hello world application on Electron.js",
 5  "main": "main.js",
 6  "scripts": {
 7    "start": "electron .",
 8    "test": "echo \"Error: no test specified\" && exit 1"
 9 },
10  "author": "",
11  "license": "ISC"
12}

该脚本属性需要一个对象,有尽可能多的密钥 / 值对。这些密钥 / 值对中的每个密钥是可以运行命令的名称. 每个密钥的相应值是可以运行的实际命令。

在此项目中,您将使用开始作为密钥和电子作为值。

一旦完成,保存并退出文件。

接下来,您将在您的项目中安装电子作为开发依赖,在您的Hello-world项目目录中运行以下命令:

1npm install --save-dev electron

成功安装电子依赖到您的项目后,package.json文件将类似于此:

 1[label package.json]
 2{
 3  "name": "hello-world",
 4  "version": "1.0.0",
 5  "description": "hello world application on Electron.js",
 6  "main": "main.js",
 7  "scripts": {
 8    "start": "electron .",
 9    "test": "echo \"Error: no test specified\" && exit 1"
10  },
11  "author": "",
12  "license": "ISC",
13  "devDependencies": {
14    "electron": "^8.2.1"
15  }
16}

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

有两个依赖性属性依赖性和dev依赖性可以用一个关键差异来识别。依赖性属性用于定义模块需要在生产中运行的依赖性。

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

第3步:写出Hello World!应用程序

让我们开始写你的第一个电子应用程序。

Electron 使用两种类型的流程:主流程(服务器侧)和渲染器流程(客户端)。

为此,您将使用两个文件:main.js 和index.html。

「main.js」是您的应用程序的主要流程,而「index.html」是您的电子应用程序渲染流程。

1hello-world
2+-- package.json
3+-- main.js
4+-- index.html

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

首先打开您的 main.js 文件:

1nano main.js

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

1[label main.js]
2const { app, BrowserWindow } = require('electron')

它包含两个(https://andsky.com/tech/tutorials/understanding-destructuring-rest-parameters-and-spread-syntax-in-javascript# destructuring)命名为app和BrowserWindow,这对电子模块是必需的。Browserwindow模块用于在电子应用中创建新窗口。

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

 1[label main.js]
 2. . .
 3function createWindow () {
 4  const mainWindow = new BrowserWindow({
 5    width: 800,
 6    height: 600
 7  })
 8
 9  mainWindow.loadFile('index.html')
10}
11
12app.whenReady().then(createWindow)

您将电子CreateWindow函数添加到您的Hello-world应用程序中,在这个函数中,您将创建一个新的BrowserWindow渲染过程,并通过宽度和高度参数。

mainWindow.loadFile()方法将某些内容转换为BrowserWindow。

主流程将在app.whenReady().then(windowName)方法准备时启动,在这个时刻,主流程会调用createWindow函数,该函数会创建一个新的 renderer 流程或浏览器窗口实例,其宽度为 800px 和高度为 600px。

然后将以下事件代码添加到您的文件中:

 1[label main.js]
 2. . .
 3app.on('window-all-closed', () => {
 4  if (process.platform !== 'darwin') {
 5    app.quit()
 6  }
 7})
 8
 9app.on('activate', () => {
10  if (BrowserWindow.getAllWindows().length === 0) {
11    createWindow()
12  }
13})

您将两个主要的系统事件(https://www.electronjs.org/docs/api/app)添加到项目中――窗口全部关闭和激活事件:

)或任务栏图标。

添加这些代码块后,您对 main.js 文件的最终输出将类似于以下:

 1[label main.js]
 2const { app, BrowserWindow } = require('electron')
 3
 4function createWindow () {
 5  const mainWindow = new BrowserWindow({
 6    width: 800,
 7    height: 600
 8  })
 9
10  mainWindow.loadFile('index.html')
11
12}
13
14app.whenReady().then(createWindow)
15
16app.on('window-all-closed', () => {
17  if (process.platform !== 'darwin') {
18    app.quit()
19  }
20})
21
22app.on('activate', () => {
23  if (BrowserWindow.getAllWindows().length === 0) {
24    createWindow()
25  }
26})

一旦完成,保存并退出此文件。

接下来,创建并打开index.html文件:

1nano index.html

添加以下代码,作为最终输出发送:

 1[label index.html]
 2<!DOCTYPE html>
 3<html>
 4  <head>
 5    <meta charset="UTF-8">
 6    <title>Hello World!</title>
 7  </head>
 8  <body
 9    <h1>Hello World!</h1>
10  </body>
11</html>

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

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

1npm start

您将收到一个应用程序窗口作为输出。

Hello world printed output window of the application

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

步骤4 — 定制您的`Hello World!`应用程序

现在你已经完成了使用Electron框架的第一个跨平台应用程序的初始设置,让我们看看你还能做些什么来改善应用程序的原生行为。

Electron 具有许多内置功能,如对话框、窗口选项、新窗口、菜单、快捷键、通知、触摸栏、会话控制等,可以改善桌面应用程序的用户体验。

应用程序的优良窗口设置

当您将页面直接加载到窗口时,在应用程序启动时,您可能会看到页面不会立即加载。

要做到这一点,您需要通过在创建时传递新的配置参数来隐藏BrowserWindow。

打开main.js文件:

1nano main.js

将显示:假参数添加到BrowserWindow对象的体内:

1[label main.js]
2const mainWindow = new BrowserWindow({
3   width: 800,
4   height: 600,
5   show: false
6 })

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

要做到这一点,你必须在BrowserWindow函数内添加下面的代码行BackgroundColor对象。

1backgroundColor: '#Your hex color code'

将此行作为以下突出代码添加到您的CreateWindow函数:

 1[label main.js]
 2function createWindow () {
 3 const mainWindow = new BrowserWindow({
 4   width: 800,
 5   height: 600,
 6   show: false,
 7   backgroundColor: '#ffff00'
 8 })
 9 mainWindow.loadFile('index.html')
10
11 mainWindow.once('ready-to-show', mainWindow.show)
12
13}

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

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

1npm start

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

Hello world printed output window with the background color of yellow

最后,您将看到应用程序窗口优雅地加载。

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

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

电子可以从单个主流程创建多个渲染过程(多个窗口)。

首先,打开main.js:

1nano main.js

创建一个名为secWindow的新方法,并通过添加突出代码来设置新创建的窗口的宽度和高度参数:

 1[label main.js]
 2function createWindow () {
 3const mainWindow = new BrowserWindow({
 4  width: 800,
 5  height: 600,
 6  show: false,
 7  backgroundColor: '#ffff00'
 8})
 9
10const secWindow = new BrowserWindow({
11  width: 600,
12  height: 400,
13 })
14. . .
15}

现在将内容加载到新创建的) 内容。

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

 1[label main.js]
 2 function createWindow () {
 3 const mainWindow = new BrowserWindow({
 4   width: 800,
 5   height: 600,
 6   show: false,
 7   backgroundColor: '#ffff00'
 8 })
 9
10const secWindow = new BrowserWindow({
11   width: 600,
12   height: 400,
13 })
14
15 mainWindow.loadFile('index.html')
16
17 secWindow.loadURL('https://www.digitalocean.com/')
18
19 mainWindow.once('ready-to-show', mainWindow.show)
20}

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

1npm start

您将收到您的初始窗口,黄色背景和一个新的应用程序,加载的URL。

New desktop application window of loaded URL with previously hello world printed output window

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

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

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

电子应用程序的构建过程被认为有点困难,因为它需要很多工具. 但是,在这里你会使用 electron-builder CLI 工具,为任何平台构建应用程序提供了最好的方式。

首先,您将在全球范围内安装electron-builder CLI 工具,以执行以下命令:

1sudo npm install -g electron-builder

<美元 > [注] 注: 您可以使用npm'或yarn'安装电子-建构器' 。如果打算长期开发自己的应用,电子建设者'的制造者建议yarn'以避免潜在的相容性问题。要使用yarn'进行安装,需要确保在计算机上安装安装,然后运行yarn添加电子建设器-dev',以安装yarn'的`电子建设器'。 < $ > (美元)

完成电子构建器的安装后,您可以通过在终端中运行以下命令来验证其成功:

1electron-builder --version

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

现在你可以构建你的第一个跨平台应用程序. 要做到这一点,打开您的终端,并在您的项目目录中运行以下命令:

1electron-builder -mwl

您使用mwl旗帜来构建适用于 macOS、Windows 和 Linux 的应用程序。

注意:仅 macOS 用户可以为所有平台构建。Windows 用户只能为 Windows 和 Linux 平台构建应用程序。Linux 用户只能为 Linux 平台构建应用程序。有关详细信息,请参阅文档。

为了构建单独操作系统的应用程序,使用以下方法:

构建macOS应用程序:

1electron-builder --mac

构建Windows应用程序:

1electron-builder --win

构建Linux应用程序:

1electron-builder --linux

这个过程需要一些时间,而依赖性下载和您的应用程序构建。

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

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

1hello-world
2  +-- hello-world-1.0.0-mac.zip
3  +-- hello-world-1.0.0.dmg
4  +-- hello-world Setup 1.0.0.exe
5  +-- win-unpacked
6  +-- mac
7  +-- linux-unpacked
8  +-- hello-world_1.0.0_amd64.snap

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

macOS: DMG 和 ZIP 用于 Squirrel.Mac * Windows: NSIS (.exe) * Linux: 如果您在 Windows 或 macOS 上构建,则x64的 Snap 和 AppImage 将是输出。

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

结论

在本教程中,您创建了第一个跨平台的应用程序,使用了Electron框架,添加了原生功能,并在macOS上构建了该应用程序。

要了解更多关于电子,你可以检查他们的文档. 现在你也可以与任何人分享你的新创建的桌面应用程序通过创建安装程序.

如何在 macOS 上使用 Electron 创建第一个跨平台桌面应用程序

介绍