Electron是由GitHub開發的一個開源架構，可用于開發桌面應用程式，Node + Chromium的開發使得它擁有強大的跨平台能力，我們所熟知的GitHub
Atom
和微軟
Visual Studio Code
都是Electron應用程式。
1. 桌面應用的優勢
• 快速打開
• 離線可用
• 調用系統API • 安全
• ...
2. 各大桌面應用開發技術對比
原生桌面技術開發
- 性能好
- 功能強大
- 包體積相對小
- 門檻高
- 開發效率低
QT 桌面技術開發
- 跨平台(支援主流作業系統)
- 高性能
- 接近原生應用的體驗
- C++ 開發門檻較高
- 開發效率一般
Flutter
• 跨平台、跨端
• 基于web技術
• 桌面端尚未成熟 • 生态發展不完善
NW.js
• 跨平台
• 基于web技術
• 源碼加密、支援chrome擴充 • 社群支援可
• 開發效率高
• 體積大、性能一般
Electron
• 跨平台
• 基于web技術
• 社群活躍、生态好 • 實踐案例多
• 開發效率高
• 體積大、性能一般
3. 架構圖
4. 安裝與環境
環境依賴：
node.js
&
npm
IDE:
Visual Studio Code
or 任意編輯器
快速開始:
npm i 5. 一個最簡的Demo
了解主程序子產品
const { app, BrowserWindow, ipcMain} = require(‘electron’)
- app 應用的生命周期，例如 app.on(‘ready’，callback)
- BrowserWindow 控制視窗
let win = new BrowserWindow({width, height, ...}) // 建立視窗
win.loadURL(url)、win.loadFile(path) // 加載遠端或本地頁面 - Notification 通知
let notification = new Notification({title, body, actions:[{text, type}]})
notification.show() - ipcMain.handle(channel, handler) 主線程，繼承 Event Emitter
6. 主程序與渲染程序
1. 主程序負責什麼
- package.json 的 main 腳本
- 一個應用一個主程序
- 原生GUI的排程管理，例如BrowserWindow、Tray、 Dock、Menu
- app 應用生命周期
- 建立渲染程序
2. 渲染程序負責什麼
- 展示webui的程序
- 借助node.js、electron，擁有更多原生能力
- 一個應用，多個渲染程序
3. IPC(Inter-Process Communication，程序間通信)
- 通知事件、資料傳輸、資料共享
- 主程序的ipcMain和渲染程序的ipcRenderer
- 繼承自EventEmitter
4. 從渲染程序到主程序
- Callback 寫法:
ipcRenderer.send
ipcMain.on - Promise 寫法 (Electron 7.0 之後，處理請求 + 響應模式)
ipcRenderer.invoke
ipcMain.handle 7. 優勢總結
- 不必再為相容性而煩惱
- 使用chrome的最新特性，無需polyfill • es标準中最新文法
- 無跨域，請求走nodejs
- 讀取本地檔案