【electron】electron入門 教你如何建立第一個electron應用 並進行打包【超詳細】
前言
electron 是一個可以讓我們使用js建立桌面應用程式的框架，並且可以很簡單的實現跨平臺，讓我們可以更輕鬆的書寫業務邏輯，而不用擔心跨平臺的問題。事實上，electron可以被看做一個精簡版的Chrome，內部的V8直譯器固然很強大，但是對比起傳統的桌面應用程式，也有略顯不足的地方。
但是這樣的框架只有electron一個嗎？當然不是，與之相對應的，還有一款出名的框架NW.js，至於二者的差別以及如何選擇，這裡暫不作出詳細的說明，當前我們只關心electron的問題。
編寫第一個electron應用
首先我們要安裝electron-prebuilt，它是一個npm模組，因此我們可以使用Npm來進行安裝，它是一個electron的預編譯版本。
npm install -g electron-prebuilt接下來安裝electron-packager ，它也是一個npm模組，是一個用於打包electron應用的工具，具體使用方法我們稍後會詳細說明。
npm install -g electron-packager現在開始進入正題，我們如何建立一個electron應用。
我們現在僅僅需要3個檔案。
index.html
main.js
package.json
index.html使我們想要顯示的頁面，main.js為此應用的入口，package.json為npm專案的配置檔案。現在整體看倆與普通的Node.js專案並無多大的差別。
cd進自己的專案進行初始化（目前我已經建立了一個專案資料夾叫myApp）
cd myApp
npm init填好一些相關資訊後，我的package.json大概是這樣的：
{
"name": "zzh",
"version": "0.0.1",
"description": "a simple application",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "zzh" 我們再來看一下index.html，我給它加入了一個標題Hello World，其餘沒有什麼變動。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>hello electron</h1>
</body>
</html>接下來是main.js
const {app, BrowserWindow} = require('electron');
let win;
let windowConfig = {
width:800,
height:600
};
function createWindow(){
win = new BrowserWindow(windowConfig);
win.loadURL(`file://${__dirname}/index.html`);
//開啟除錯工具
win.webContents.openDevTools();
win.on('close',() => {
//回收BrowserWindow物件
win = null;
});
win.on('resize',() => {
win.reload();
})
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
app.quit();
});
app.on('activate',() => {
if(win == null){
createWindow();
}
})第一行載入app ，以及BrowserWindow模組。
app模組是為了控制整個應用的宣告週期而設計的，它可以監聽很多的事件，做出相應的響應。
BrowserWindow模組可以建立一個窗體，目前我們需要這麼多就行了。
然後聲明瞭一個win變數，實際上我們可以把它看做窗體物件的引用。直到現在還沒賦初始值。
let win;緊接著我建立了一個窗體的配置JSON，內部指明瞭該窗體的大小（寬高）。
let windowConfig = {
width:800,
height:600
};然後宣告一個createWindow的函式用於建立窗體，在app模組被觸發ready事件後執行。
內部為win變數進行賦值，它是一個BrowserWindow物件的例項。
win.loadURL用於載入一個html頁面供顯示，這裡填入的是我上面建立的index.html。
當win被賦值為窗體物件後，對它的resize和close事件進行監聽，意思是當窗體寬高大小發生變化後進行”重繪“，而close事件是監聽窗體的關閉，當窗體被關閉時，令win = null，以便觸發V8的GC機制時，回收掉BrowserWindow物件。
win = new BrowserWindow(windowConfig);
win.loadURL(`file://${__dirname}/index.html`);
//開啟除錯工具
win.webContents.openDevTools();
win.on('close',() => {
//回收BrowserWindow物件
win = null;
});
win.on('resize',() => {
win.reload();
})下面是app的事件監聽
ready事件，當electron完成初始化時觸發，並執行createWindow建立窗體。
window-all-closed ，當所有窗體都被關閉時觸發，此時執行app.quit()用於結束整個應用。
activate ，當應用被啟用時觸發，此事件對於Mac使用者很有用，比如DOCK上點選就相當於觸發了activate事件，此時我們需要手動呼叫createWindow進行窗體建立。
app.on('ready',createWindow);
app.on('window-all-closed',() => {
app.quit();
});
app.on('activate',() => {
if(win == null){
createWindow();
}
})執行我們的應用
到現在，程式碼基本沒有問題，我們需要讓我們的應用跑起來。
為了方便，我們編輯package.json檔案，新增start欄位：
"start": "electron ."package.json
{
"name": "zzh",
"version": "0.0.1",
"description": "a simple application",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "zzh",
"license": "ISC"
}
我們可以看到應用已經完美的跑了起來，我們開啟了devTools因此，我們的應用應該是這樣的。
打包自己的應用
現在整個過程進行到最後一步，我們需要打包我們自己的應用，那麼如何打包，這就需要用到我們先前已經安裝的electron-packager
開啟命令列我們可以這樣使用它：
electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=0.0.1那麼它大概形如這樣
electron-packager <應用目錄> <應用名稱> <打包平臺> --out <輸出目錄> <架構> <應用版本>於是我們愉快的進行打包。
發現它並不行！
報出一個提示
Unable to determine Electron version. Please specify an Electron version他說我們需要指明Electron version。這個引數是當前安裝Electron的版本，不知道的可以直接electron就能看到了，我這裡是1.4.13，經過改進後如下
electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=0.0.1 --electron-version=1.4.13執行完畢後，看到父級目錄下已經產生了我們希望看到的應用資料夾。
至此，一個quick start就已經完畢了。
electron github：https://github.com/electron/ 大家可以進行更進一步的學習！