如何利用 Electron 开发一个桌面 APP

你是否曾经想过可以用 HTML、CSS 和 JavaScript 这些前端技术来构建跨平台的桌面应用？

使用 Electron 就能做到。

本文带着你深入 Electron 的核心概念。

阅读本文后，你会知道如何使用 Electron、HTML 和 CSS 构建跨平台桌面应用。

在开始之前，你可以提前看看我们在本教程中要构建的应用。

Hear Me Type [译者注：本文的示例应用名为 Hear Me Type] 功能简单直接，应用中每个键都会播放特有的声音。比如我按下了 “A”，应用会播放字母 A 特有的声音。

该应用目前有两个版本可供下载：本教程的源码，以及一个推荐给更有经验的 Electron 用户的高级版本。

因为我还在为改善应用以及添加一些新功能，所以代码会发生变化，请一定注意看看有哪些更新。

就此打住，我们现在开始学习 Electron 并用它来创建第一个应用！

什么是 Electron？

Electron 是一个基于 Chrominum 和 Node.js 的跨平台桌面应用框架。

在这个框架中很容易构建基于 HTML、CSS 和 JavaScript 技术的跨平台应用。构建出来的应用会很好地兼容 Mac、Windows 和 Linux 操作系统。

它还有其它一些特性：

• 自动更新 —— 应用支持自动更新

• 原生菜单和通知 —— 可以创建原生应用菜单和上下文菜单

• 应用崩溃报告 —— 可以将崩溃报告提交到远程服务器

• 调试和分析 —— Chrominum 的内容模块可以发现性能瓶颈和缓慢的操作。你也可以在应用中使用自己喜欢的 Chrome 开发者工具。

• Windows installer —— 可以快速便捷地创建安装包。

如果你对 Electron 的功能感到满意，我们就继续深入，创建一个简单的 Electron 应用。

动手之前需要先安装 Node.js。你还应该申请一个 GitHub 账户来保存和更新应用。虽然这个账户并不是必须的，但我非常建议你去申请一个。Github 是一个行业标准，学会使用 Github 非常重要。

我会在教程中使用 Github。

准备好之后，打开系统终端窗口。

按照下面的介绍将 Electron Quick Start 这个 Git 库克隆到计算机上。

我们会基于 Electron Quick Start 来创建自己的软件。

# Clone the Quick Start repository
git clone 
# Go into the repository
cd electron-quick-start
# Install the dependencies and run
npm install && npm start

完成上面的步骤之后，你会看到一个像浏览器窗口的应用打开。它确实是一个浏览器窗口！

这个窗口显示的样子在不同的操作系统上会有所不同。我选择使用 Windows 的经典样式。非常赞！

Quick-Start Electron 应用的主窗口

正如我之前所说，你可以在应用中使用 Chrome 开发者工具，这个工具的用法跟在浏览器中的开发者工具一样，再赞一个！

Electron 应用程序架构

我们来看看这个应用的源代码及其文件结构。可以使用你自己喜欢的编辑器或者 IDE 打开项目，我使用 Atom …… 你猜到了 …… 它就是用 Electron 构建的！[译者注：我比较喜欢 VSCode，也是基于 Electron 构建的]

新应用的目录和文件结构。

我们有一个基本的文件结构：

electron-quick-start

- index.html
- main.js
- package.json
- render.js

文件结构类似于我们创建网页的结构。

• index.html 是一个 HTML5 页面，它具有很重要的作用：提供画布

• main.js 创建窗口并处理系统事件

• package.json 是应用的启动脚本。它包含了应用的信息，在主进行中运行

• render.js 处理应用的渲染进程

也许你对主进程和渲染进程存有疑问。它们到底是什么，用来干什么？

很高兴你有此疑问。注意了，如果你来自浏览器的 JavaScript 领域，这对你来说可能是一块新的领域！

什么是进程？

看到“进程”这个词的时候，想像一下操作系统级的进程。那是运行在系统中的计算机程序实例。

启动 Electron 应用之后，查看 Windows 的任务管理器或者 macOS 的活动监视器，就可以看到与这个应用相关的进程。

这些进程都是并行运行的，为每个进程分配的内存和资源相互隔离。

如果我想创建一个 for 循环在渲染进程中逐步处理一些事件。

var a = 1;
for ( a = 1; a < 10; a ++) {
 console.log('This is a for loop');
}

这些改变只在渲染进程中有效，根本不会对主进行造成影响。“This is a for loop”消息只会出现在渲染模块中。

主进程控制着应用的生命周期。它内置了完整的 Node.js API，可以打开对话框，创建渲染进程，还可以处理其它其它与操作系统的交互操作，包括启动和退出应用。

按照惯例，这个进程写在名为 main.js 的文件中。不过你想使用其它名字也没有问题。

你可以在 package.json 文件中配置主进程文件的名称。

试验一下，打开 package.json 并将

“main”: “main.js”,

“main”: “mainTest.js”,

启动应用看看它是否仍然正常运行。

注意，主进程只有一个。

应用中的渲染进程是一个浏览器窗口。与主进程不同，可以存在多个独立的渲染进程。

因为渲染进程是各自独立的，如果其中一个崩溃了并不会影响到其它进程，这得益于 Chrominum 的多进程架构。

这些浏览器窗口就像演示网页一样，也可以被隐藏或自定义。

不过 Electron 内置了完整的 Node.js API，也就是说我们可以打开对话框或进行其它与操作系统的交互。

这样考虑；

[来源: Kristian Poslek]

还有一个问题，它们能以某种方式联系起来吗？

这些进程都在独立运行，但他们仍然需要通信，因为它们负责不同的任务，这尤其需要通信。

为此，存在一个进程间的通信系统或者 IPC。你可以使用 IPC 在主进程和渲染进程间进行通信。对于这个知识点更深入一些的解释，请阅读 Christian Engvall 的文章。

上面说的都是开发 Electron 应用的基础知识。

现在回到我们的代码！

让我们给应用所在的目录起一个合适的名称。

将目录名从 electron-quick-start 改为 hear-me-type-tutorial。

重新在编辑器或 IDE 中打开这个目录，我们打开 package.json 来进一步定制应用标识。

package.json 包含了至关重要的应用信息。这里定义应用的名称、版本、主文件、作者、许可协议等。