轉自 http://electron.atom.io/docs/tutorial/quick-start/
Electron允許你使用JavaScript及豐富的系統級API創建桌面應用程序。你可以把Electron看做一個Node.js運行時的變體，專注於桌面應用程序，而Node.js專注於Web服務器。
Electron並不是一個用JavaScript寫的GUI庫，而是Electron使用網頁作爲GUI，實際上Electron是一個小型的谷歌瀏覽器，使用JavaScript控制程序邏輯。
主進程（Main Process）
在Electron中，運行package.json文件中main腳本的進程被稱爲主進程（main process）。 運行在主進程中的腳本可以通過創建網頁窗口顯示GUI。
渲染進程（Renderer Process）
因爲Electron使用谷歌瀏覽器內核（Chromium）顯示網頁，所以Electron也繼承了Chromium的多進程架構。Electron中的每個網頁運行在獨立的進程中，被稱爲渲染進程（renderer process）。
在普通的瀏覽器中，網頁通常運行在一個沙盒環境中，不允許訪問本地資源。然而，在Electron中，可以使用Node.js提供的系統級API與操作系統交互。
主進程與渲染進程的區別
主進程通過創建BrowserWindow實例來創建網頁。每個BrowserWindow實例在第一個獨立的渲染進程中運行網頁。當BrowserWindow實例被銷燬時，對應的渲染進程也被終結。
主進程管理着所有的網頁和它們對應的渲染進程。每個渲染進程是相互獨立的，並且僅僅關心與之對應的網頁。
在網頁中，調用GUI相關的API是不被允許的，因爲在網頁中管理GUI資源是不安全的並且容易導致資源泄漏。如果在網頁中想執行GUI相關的操作，網頁所在的渲染進程必須與主進程通信，請求主進程執行相關操作。
在Electron中，有幾種方法在主進程和渲染進程中通信。ipcRenderer和ipcMain用於發送消息，remote模塊用於RPC通信。另外在FAQ中有一項是討論如何在網頁之間共享數據的。
編寫第一個Electron應用程序
通常一個Electron應用程序結構如下：
your-app/
├── package.json
├── main.js
└── index.htmlpackage.json文件內容的格式和Node.js中的模塊是相同的。 “main”屬性指定的是應用程序的啓動腳本，將作爲主進程運行。一個package.json的例子如下：
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}注意：如果“main”屬性沒有指定，Electron將默認加載文件名爲index.js的腳本文件。
main.js應該創建窗口並且處理系統事件，一個典型的例子爲：
const {app, BrowserWindow} = require('electron')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(`file://${__dirname}/index.html`)
// Open the DevTools.
win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.最後，index.html是需要顯示的網頁內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>運行應用程序
一旦創建了main.js，index.html，package.json文件，需要運行程序並測試一下程序是否是預期的效果。
electron
electron是一個npm模塊，包含了預編譯的Electron。
使用npm安裝electron模塊並執行以下命令：
macOS / Linux
$ ./node_modules/.bin/electron .Windows
$ .\node_modules\.bin\electron .手動下載的Electron
如果是手動下載的Electron，則：
Windows
$ .\electron\electron.exe your-app\Linux
$ ./electron/electron your-app/macOS
$ ./Electron.app/Contents/MacOS/Electron your-app/Electron可以在這裏下載https://github.com/electron/electron/releases
發佈應用程序
http://electron.atom.io/docs/tutorial/application-distribution/
例子
# Clone the repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install dependencies and run the app
$ npm install && npm start