简介
Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron，我们可以使用纯 JavaScript 来调用丰富的原生 APIs。
Electron用 web 页面作为它的 GUI，而不是绑定了 GUI 库的 JavaScript。它结合了 Chromium、Node.js 和用于调用操作系统本地功能的 APIs（如打开文件窗口、通知、图标等）。
现在已经有很多由 Electron 开发应用，比如 Atom、Insomnia、Visual Studio Code 等。查看更多使用 Electron 构建的项目可以访问 Apps Built on Electron
安装
安装 electron 之前，需要安装 Node.js。
然后安装 electron：
npm install electron -g
进程
Electron 的进程分为主进程和渲染进程。
主进程
在 electron 里面，运行 package.json 里面 main 脚本的进程成为主进程。主进程控制整个应用的生命周期，在主进程中可以创建 Web 形式的 GUI，而且整个 Node API 是内置其中。
渲染进程
每个 electron 的页面都运行着自己的进程，称为渲染进程。
主进程与渲染进程的联系及区别
主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的页面。
在 electron 中，页面不直接调用底层 APIs，而是通过主进程进行调用。所以如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。
在 electron 中，主进程和渲染进程的通信主要有以下几种方式：
- ipcMain、ipcRender
- Remote 模块
进程通信将稍后详细介绍。
打造第一个 Electron 应用
这也是官方的一个样例，可直接在 https://github.com/electron/electron-quick-start 找到。
一个最简单的 electron 应用目录结构如下：
electron-demo/
├── package.json
├── main.js
└── index.htmlpackage.json 与 Node.js 的完全一致，所以我们可以使用 npm init 来生成。然后将 "main": "index.js" 修改为 "main": "main.js"。之所以命名为 main.js，主要是为了与主进程这个概念对应。
main.js
const electron = require('electron');
const {
app, // 控制应用生命周期的模块
BrowserWindow, // 创建原生浏览器窗口的模块
} = electron;
// 保持一个对于 window 对象的全局引用，如果不这样做，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
let mainWindow;
function createWindow() {
// 创建浏览器窗口。
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // 是否集成 Nodejs, Uncaught ReferenceError: process is not defined
}
});
// 加载应用的 index.html。
// 这里使用的是 file 协议，加载当前目录下的 index.html 文件。
// 也可以使用 http 协议，如 mainWindow.loadURL('http://nodejh.com')。
mainWindow.loadURL(`file://${__dirname}/index.html`);
// 启用开发工具。
mainWindow.webContents.openDevTools();
// 当 window 被关闭，这个事件会被触发。
mainWindow.on('closed', () => {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 与此同时，你应该删除相应的元素。
mainWindow = null;
});
}
// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow);
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 在 macOS 上，当点击 dock 图标并且该应用没有打开的窗口时，
// 绝大部分应用会重新创建一个窗口。
if (mainWindow === null) {
createWindow();
}
});
注意，新版本的需要加上 nodeIntegration: true，不然会报错 “Uncaught ReferenceError: process is not defined”
index.html
在这里编辑需要展示的 index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World!</title>
<style media="screen">
.version {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js
<p id="version-node" class="version"></p>
and Electron
<p id="version-electron" class="version"></p>
<script type="text/javascript">
console.log('process: ', process);
var versionNode = process.version;
var versionElectron = process.versions['electron'];
console.log(versionNode, versionElectron)
document.getElementById('version-node').innerText = versionNode
document.getElementById('version-electron').innerText = versionElectron
</script>
</body>
</html>
在这个例子中，我们显示出了 electron 使用的 Node.js 版本和 electron 的版本。index.html 跟网页的 HTML 一摸一样，只是多了一些 electron 的全局对象。
运行
因为前面已经全局安装了 electron，所以我们可以使用 electron 命令来运行项目。在 electron-demo/ 目录里面运行下面的命令：
$ electron .
然后会弹出一个 electron 应用客户端，如图所示：
