前言
现如今，用 HTML、JavaScript、CSS、Node.js 写桌面应用早已不是什么新鲜的事了，作为一名前端，能够使用自己熟悉的语言，快速实现自己想要的桌面应用，是件很让人兴奋的事。
目前常见的有 NW、heX、Electron。今天，就来简单的上手一下 Electron。
Electron 是什么？
Electron 是一款可以利用 Web技术 开发跨平台桌面应用的框架，最初是 Github 发布的 Atom 编辑器衍生出的 Atom Shell，后更名为 Electron。
Electron 能做什么？
Electron 内置了 Chromium 内核 和 Node，因此可以使用 HTML 和 CSS 来实现应用的 GUI 界面，用 JavaScript 调用丰富的原生 API 实现桌面应用。你也可以将 Electron 看作是一个由 JavaScript 控制的一个小型的 Chrome 内核浏览器。
由于内置的 Chromium 内核 和 Node, 因此我们不需要关心前端的兼容问题，你甚至可以写 -webkit- only 的代码; 也不需要关心一些需要编译的 Node 模块兼容问题，因为 Node 版本是固定的。因此，用 Electron 来编写跨平台应用程序是非常合适的。
或许你还不知道，Visual Studio Code 、wordpress 和 slack 等客户端都是基于 Electron 开发的。
下面，先快速上手一下。
快速入门
相信你看到这里都是对 Node 有一定了解的，故这里不再对 Node 的安装进行描述。
我们有如下目录结构：
electron-quick-start/
├── package.json
├── main.js
└── index.html
package.json 跟常规 Node 程序一致，将 main.js 作为 程序的启动入口文件，基本内容如下：
{
"name" : "electron-quick-start",
"version" : "1.0.0",
"main" : "main.js",
"scripts" : {
"start" : "electron main.js"
},
"devDependencies": {
"electron-prebuilt": "^1.2.0"
}
}
我们用 index.html 作为我们的程序界面，简单的界面代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
接着是最重要的入口文件 main.js 的编写了，其内容如下：
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow () {
//创建一个 800x600 的浏览器窗口
mainWindow = new BrowserWindow({width: 800, height: 600});
//加载应用的界面文件
mainWindow.loadURL(`file://${__dirname}/index.html`);
//打开开发者工具，方便调试
//mainWindow.webContents.openDevTools();
mainWindow.on('closed', function () {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function () {
if (mainWindow === null) {
createWindow();
}
});
最后，执行：
npm install && npm start
运行结果如下图
欢迎加入前端开发交流群：498524034