Electron 跨平臺應用開發入門

時間 2019-12-05

標籤 electron 跨平臺應用開發入門简体版

原文原文鏈接

本文由 Deguang 發表於碼路-技術博客html

Tips:前端

Electron 介紹
Electron 環境搭建
進程通訊
調用系統 API

Write once, run anywhere.
Sun 公司 Java 介紹詞。

端的跨平臺實現方案有哪些？

Web（瀏覽器）
移動端設備：Hybrid（混合）、React Native、Weex、Flutter
桌面端：NW.js、Electron、Flutter（~1.0）

Electron

1. 什麼是 Electron

Electron 是由 Github 開發，用 HTML，CSS 和 JavaScript 來構建跨平臺桌面應用程序的一個開源庫。 Electron 經過將 Chromium 和 Node.js 合併到同一個運行時環境中，並將其打包爲 Mac，Windows 和 Linux 系統下的應用來實現這一目的。
開發者只要使用 Web 技術完成業務部分便可，這就是對前端開發者最友好的地方。node

2. Electron 應用結構

Elctron 應用運行時，分爲 主進程 和 渲染進程。ios

主進程 (Main Process)

package.json 中定義的 main 腳本運行的進程，被定義爲 主進程，一個 Electron 應用有且只有一個主進程。
主進程能夠建立 Web 頁面窗口，並傳入 URL 加載網頁做爲圖形界面。

渲染進程 (Renderer Process)

Electron 的每一個頁面都有它本身的進程，叫作渲染進程。每個渲染進程都是獨立的，只關心它所運行的頁面；

進程通訊（IPC, Inter-Process Comminication）

Electron 不容許渲染進程調用系統 GUI 的原生 API，例如打開文件選擇之類的系統操做，這種對系統 API 的調用只容許存在與主進程中。渲染進程，也就是頁面調用系統 API，須要由主進程擔任橋樑的做用，來完成操做並獲得返回結果。這裏有兩種方式能夠實現進程通訊：git

使用 ipcRenderer 和 ipcMain 模塊通訊

ipcRenderer
ipcRenderer 是從渲染進程到主進程的異步通訊，可使用它提供的一些方法從渲染進程發送同步或異步的消息github
ipcMain
ipcMain 是從主進程到渲染進程的異步通訊，處理從渲染進程發送出來的異步和同步信息，web

// 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 又是什麼？

ipcMain 和 ipcRenderer 都是 EventEmitter 類的一個實例。 EventEmitter 類是由 NodeJS 中的 events 模塊定義、導出的。
EventEmitter 類是 NodeJS 事件的基礎，實現了事件模型須要的接口，包括 addListener，removeListener, emit 及其它工具方法. 同原生 JavaScript 事件相似，採用了發佈/訂閱(觀察者)的方式，使用內部 _events 列表來記錄註冊的事件處理器。sql

使用 remote 進行 RPC 通訊

在渲染進程中使用主系統模塊。chrome

// 渲染進程中
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：x8六、 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 操做，下面是經常使用的一些輕量級數據庫：

參考文檔：

Electron 文檔

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。