Electron 跨平臺應用開發入門
Tips:
- Electron 介紹
- Electron 環境搭建
- 程序通訊
- 呼叫系統 API
Write once, run anywhere.
端的跨平臺實現方案有哪些？
Electron
1. 什麼是 Electron
合併到同一個執行時環境中，並將其打包為 Mac，Windows 和 Linux 系統下的應用來實現這一目的。
開發者只要使用 Web 技術完成業務部分即可，這就是對前端開發者最友好的地方。
2. Electron 應用結構
Elctron 應用執行時，分為
主程序
和
渲染程序
。
主程序 (Main Process)
-
package.json中定義的main指令碼執行的程序，被定義為主程序，一個 Electron 應用有且只有一個主程序。 - 主程序可以建立 Web 頁面視窗，並傳入 URL 載入網頁作為圖形介面。
渲染程序 (Renderer Process)
- Electron 的每個頁面都有它自己的程序，叫做渲染程序。每一個渲染程序都是獨立的，只關心它所執行的頁面；
程序通訊（IPC, Inter-Process Comminication）
Electron 不允許渲染程序呼叫系統 GUI 的原生 API，例如開啟檔案選擇之類的系統操作，這種對系統 API 的呼叫只允許存在與主程序中。渲染程序，也就是頁面呼叫 系統 API，需要由主程序擔任橋樑的作用，來完成操作並得到返回結果。這裡有兩種方式可以實現程序通訊：
使用 ipcRenderer 和 ipcMain 模組通訊
-
ipcRenderer
ipcRenderer 是從渲染程序到主程序的非同步通訊，可以使用它提供的一些方法從渲染程序傳送同步或非同步的訊息
-
ipcMain
ipcMain 是從主程序到渲染程序的非同步通訊，處理從渲染程序傳送出來的非同步和同步資訊，
// renderer process
const {ipcRenderer} = requier('electron')
// async
ipcRenderer.on('PICK_FILE_CALLBACK', (event, arg) => {
console.log(arg) // files
})
ipcRenderer.send('PICK_FILE')
// sync
ipcRenderer.sendSync('PICK_FILE_SYNC') // files
// main process
const {ipcMain} = require('electron')
// async
ipcMain.on('PICK_FILE', (event, data) => {
// do something ...
event.sender.send('PICK_FILE_CALLBACK', 'files')
})
// sync
ipcMain.on('PICK_FILE_SYNC', (event, data) => {
// do something
event.returnValue = 'files'
})
more:ipcRenderer 、ipcMain
-
ipcMain、ipcRenderer又是什麼？
EventEmitter 類是 NodeJS 事件的基礎，實現了事件模型需要的介面， 包括 addListener，removeListener, emit 及其它工具方法. 同原生 JavaScript 事件類似， 採用了釋出/訂閱(觀察者)的方式， 使用內部 _events 列表來記錄註冊的事件處理器。
使用 remote 進行 RPC 通訊
在渲染程序中使用主系統模組。
// 渲染程序中
const { BrowserWindow } = require('electron').remote
let win = new BrowserWindow({width: 600, height: 400})
win.loadURL('https://github.com')
- remote 物件
remote 模組返回的物件表示主程序中的一個物件，呼叫遠端物件、遠端函式時，相當於傳送同步程序資訊。let win = new BrowserWindow({width: 600, height: 400})
，相當於在主程序中建立了一個 BrowserWindow 物件，然後在渲染程序中返回了相應的遠端物件。
more:remote
3. API
Electron API
Electron 提供了大量API 以優化桌面應用開發體驗。
Electron API 都有指派程序型別（文件中標記）：只能用於主程序（BrowserWindow
）、只能用於渲染程序(remote
) 和 兩種程序中均可使用。
Node.js API
Electron 同時在主程序和渲染程序中對Node.js 暴露了所有的介面
- 原生 API
// Native API
const fs = require('fs')
fs.readFile(...)
- 第三方 Node.js 模組
npm install -save axios
const axios = require('axios')
axios.interceptors.request(...)
4. 第一個 Electron 應用
環境依賴：Node.js
&&Npm
(Yarn
)
- Node.js: 安裝參考https://nodejs.org
-
Yarn:
npm i -g yarn
推薦使用yarn
構建 Electron，使用npm
大概率出現依賴安裝失敗的情況
起步
0.0.1建立demo
目錄，執行npm init
，配置啟動指令碼"start": "electron ."
// package.json
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC"
}
0.0.2建立main.js
&&index.html
➜demo tree . ├── index.html ├── main.js └── package.json
0.0.3安裝Electron
npm install --save-dev electron
0.0.4建立一個視窗：
// main.js
const { app, BrowserWindow } = require('electron')
let win
function createWindow() {
win = new BrowserWindow({ width: 600, height: 400})
win.loadFile('index.html')
}
app.on('ready', createWindow)
<!-- index.html --> <body> <h1>Hello, Electron.</h1> Node.js: <script>document.write(process.versions.node)</script>; Chrome: <script>document.write(process.versions.chrome)</script>; Electron: <script>document.write(process.versions.electron)</script>. </body>
0.0.5執行npm run start
，即可開啟一個視窗，顯示Hello, Electron.
。
0.0.6更新main.js
，嘗試更多功能：
// main.js
const { app, BrowserWindow } = require('electron')
let win
function createWindow() {
win = new BrowserWindow({ width: 600, height: 400})
win.loadFile('index.html')
win.webContents.openDevTools()
win.on('close', () => {
// 關閉視窗、清空 win 物件
win = null
})
app.on('window-all-closed', () => {
// macOS 應用通常關閉視窗還是保活的，只有使用 cmd + q 強制退出
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// macOS 點選 dock 圖示並且沒有其他視窗開啟時，重新建立一個視窗
if (win === null) {
createWindow()
}
})
}
app.on('ready', createWindow)
0.0.7重新執行npm run start
啟動應用。
more: 更多 Electron API 使用，可以嘗試官方electron-api-demos
打包應用
electron-packager
# 安裝 electron-packager npm install electron-packager --save-dev
# 基本命令 electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...] # 例如： # electron-packager ./ demo --out ./dist --app-version 1.0.0 --overwrite
引數說明：
- sourcedir：專案路徑
- appname：應用名稱
- platform：構建平臺的應用（Windows、Mac 還是 Linux）
- arch：x86、 x64 還是兩個架構都用
- optional options：可選選項
為了更方便的構建，在package.json
增加構建指令碼
"package": "electron-packager ./ demo --out ./dist --app-version 1.0.0 --overwrite"
執行npm run package
more:electron-packager
electron-builder
# 安裝 electron-builder npm install electron-builder --save-dev
// package.json 增加如下配置
"build": {
"productName": "xxx",
"appId": "com.xxx.xxx"
},
"scripts": {
"dist": "electron-builder"
}
執行npm run dist
，完成打包
more:electron-builder
ps：mac 跨平臺 打包 win32 需要
wine
客戶端資料庫
Electron 應用可以在本地使用客戶端資料庫，來維護本地資料，進行相應的CURD
操作，下面是常用的一些輕量級資料庫：
參考文件：