阅读本文后，你会知道如何运用 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 的经典样式。十分赞!
正如我之前所说，你可以在运用中运用 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，也就是说我们可以翻开对话框或停止其它与操作系统的交互。
这样思索;
还有一个成绩，它们能以某种方式联络起来吗?
这些进程都在独立运转，但他们依然需求通讯，由于它们担任不同的义务，这尤其需求通讯。
为此，存在一个进程间的通讯系统或许 IPC。你可以运用 IPC 在主进程和渲染进程间停止通讯。关于这个知识点更深化一些的解释，请阅读 Christian Engvall 的文章。
下面说的都是开发 Electron 运用的基础知识。
如今回到我们的代码!
私有化
让我们给运用所在的目录起一个适宜的称号。
将目录名从 electron-quick-start 改为 hear-me-type-tutorial。
重新在编辑器或 IDE 中翻开这个目录，我们翻开 package.json 来进一步定制运用标识。
package.json 包含了至关重要的运用信息。这里定义运用的称号、版本、主文件、作者、容许协议等。
如今把作者改成本人的称号，自豪感油但是生。
找到 “author” 参数，然后将值改成本人的称号。它看起来像这样：
“author”: “Carol Pelu”,
我们还要改其它一些参数。在 package.json 中找到 name(称号) 和 description(阐明)并修正它们：
帅呆了!如今运用有了新称号，还有冗长而明晰的阐明。
记住，你可以在终端运转 npm start 来运转运用，以察看所做的改动。
我们会继续在运用中添加一些希冀的功用。我们想在按下每个键的时分播放不同的声响。
哦，幽默的功用!
没有功用的运用是什么?什么都不是……
如今我们要给它添加功用。
为了让运用照应输入，我们必须定义一个元历来捕捉事情，然后触发希冀的举措。
为此，我们会创立一个具有特殊称号的若干 audio 元素，对应于按键。然后我们会运用一个 switch 语句来定位按下的键，播放与之关联的声响。
假设你如今觉得有点复杂，不要怕，我会指引你一步步停止。
下载这个紧缩包，它包含了我们要运用的一切声响文件。很快就会用到!
我们会翻开 index.html 文件，创立一个<audio> 元素，在我们的运用中参加声响。
在<body> 元素外部，创立一个 div 元素，将其 class 属性设置为 audio。
在刚刚创立的 div 元素，创立<audio> 元素，将其 ID 命名为 “A”，source 属性设置为 “sounds/A.mp3”，preload 属性设置为 “auto”。
preload=”auto” 用于通知运用在页面加载的时分就加载残缺的声响文件。index.html 是运用的主文件，一切声响都会在运用启动的时分加载。
下面是代码：
<div class="audio">
(责任编辑：admin)