前言
現如今，用 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