1.關於Electron

Electron是由Github開發，用HTML，CSS和JavaScript來構建跨平臺桌面應用程式的一個開源庫。Electron通過將Chromium和Node.js合併到​​前端培訓​​同一個執行時環境中，並將其打包為Mac，Windows和Linux系統下的應用來實現這一目的。

為了保持Electron的小巧 (檔案體積) 和可持續性開發 (以防依賴庫和API的泛濫) ，Electron限制了所使用的核心專案的數量。比如Electron只用了Chromium的渲染庫而不是其全部元件。這使得升級Chromium更加容易，但也意味著Electron缺少了Google Chrome裡的一些瀏覽器相關的特性。新增到Electron的新功能應該主要是原生 API。如果可以的話，一個功能應該儘可能的成為一個Node.js模組。

2.開發環境

可以使用原生的Node.js開發環境來開發Electron應用。為了打造一個Electron桌面程式的開發環境，你只需要安裝好Node.js、npm、一個順手的程式碼編輯器以及對你的作業系統命令列客戶端有基本瞭解。我們以比較常見的windows開發環境（win7以上）為例：

首先，安裝最新版本的node.js。推薦安裝最新的長期支援的版本。在安裝過程中的配置介面請勾選node.js runtime、npm package manager和add to path這三個選項。可通過以下命令來確認node和npm已經安裝完成。

3.打造一個簡單的Electron應用

Electron 可以讓你使用純 JavaScript 呼叫豐富的原生(作業系統) APIs 來創造桌面應用。你可以把它看作一個 Node. js 的變體，它專注於桌面應用而不是 Web 伺服器端。這不意味著 Electron 是某個圖形使用者介面（GUI）庫的 JavaScript 版本。相反，Electron 使用 web 頁面作為它的 GUI，所以你能把它看作成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。

從開發的角度來看, Electron application 本質上是一個 Node. js 應用程式。與 Node.js 模組相同，應用的入口是 package.json 檔案。一個最基本的 Electron 應用一般來說會有如下的目錄結構：

your-app/
├── package.json
├── main.js
└── index.html

為你的新Electron應用建立一個新的空資料夾。開啟你的命令列工具，然後從該資料夾執行npm init

npm 會幫助你建立一個基本的 package.json 檔案。其中的 main 欄位所表示的指令碼為應用的啟動指令碼，它將會在主程序中執行。如下片段是一個 package.json 的示例：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

注意：如果 main 欄位沒有在 package.json 中出現，那麼 Electron 將會嘗試載入 index.js 檔案（就像 Node.js 自身那樣）。如果你實際開發的是一個簡單的 Node 應用，那麼你需要新增一個 start 指令碼來指引 node 去執行當前的 package,把這個 Node 應用轉換成一個 Electron 應用也是非常簡單的，我們只不過是把 node 執行時替換成了 electron 執行時。

{
  "name": "demo",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"}

4.開發一個簡單的electron

Electron apps 使用JavaScript開發，其工作原理和方法與Node.js 開發相同。electron模組包含了Electron提供的所有API和功能，引入方法和普通Node.js模組一樣。

electron 模組所提供的功能都是通過名稱空間暴露出來的。比如說：electron.app負責管理Electron 應用程式的生命週期， electron.BrowserWindow類負責建立視窗。下面是一個簡單的main.js檔案，它將在應用程式準備就緒後開啟一個視窗。

您應當在 main.js 中建立視窗，並處理程式中可能遇到的所有系統事件。下面我們將完善上述例子，新增以下功能：開啟開發者工具、處理視窗關閉事件、在macOS使用者點選dock上圖示時重建視窗，新增後，main. js 就像下面這樣：

const { app, BrowserWindow } = require('electron')


function createWindow () {   
  // 建立瀏覽器視窗
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })


  // 並且為你的應用載入index.html
  win.loadFile('index.html')


  // 開啟開發者工具
  win.webContents.openDevTools()
}


// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// 部分 API 在 ready 事件觸發後才能使用。
app.whenReady().then(createWindow)


// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // 在 macOS 上，除非使用者用 Cmd + Q 確定地退出，
  // 否則絕大部分應用及其選單欄會保持啟用。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})


app.on('activate', () => {
  // 在macOS上，當單擊dock圖示並且沒有其他視窗開啟時，
  // 通常在應用程式中重新建立一個視窗。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})


// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成幾個檔案，然後用 require 匯入。

5.啟動應用

在建立並初始化完成 main.js、 index.html和package.json之後，您就可以在當前工程的根目錄執行 npm start 命令來啟動剛剛編寫好的Electron程式了。