Electron 101 介紹

Electron 是由 Github 開發的開源框架,它允許使用 HTML/Javascript/CSS 開發同時支援 Linux/Windows/Mac 的桌面應用程式,知名的 Atom 和 Visual Studio Code 編輯器和 Slack 企業通訊軟體就是在 Electron 的基礎下開發出來的,Electron 的出現對於熟悉 Web 前端開發者等於是可以將既有的技能延伸到桌面應用程式。Electron 讓妳能夠使用Javascript來建立桌面應用程式。透過Web介面來實現桌面的UI。通常瀏覽器是無法存取本地端電腦的資源,但透過Electron中的Node.js就可以與本地端電腦進行互動。

安裝

npm install electron-prebuilt -g

// Mac OSX
brew install Caskroom/cask/electron

// Other
npm install -d electron

運作原理

原理

設計原則最好採用:The “secret” is to do the bulk of your work locally in a background process. 原則,都透過背景來執行程式碼而非直接Access遠端API,這樣速度會較快,使用的記憶體也會較少,可參考此範例

基本架構介紹

  • Electron 常見的架構如下:
your-app/
├── package.json
├── main.js
└── index.html
  • Electron 基本上需要三個檔案:
    • index.html: The web page rendered by default.
    • main.js: Starts the app and creates a browser window to render HTML.
    • package.json: Lists the application dependencies, meta data and files needed.

package.json

若main沒有指定,則預設為:index.js

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

main.js

const electron = require('electron');  // 控制应用生命周期的模块
const {app} = electron;  // 创建本地浏览器窗口的模块
const {BrowserWindow} = electron;

// 指向窗口对象的一个全局引用,如果没有这个引用,那么当该javascript对象被垃圾回收的 时候该窗口将会自动关闭
let win;

function createWindow() {
  // 创建一个新的浏览器窗口
  win = new BrowserWindow({width: 800, height: 600});

  // 并且装载应用的index.html页面
  win.loadURL(`file://${__dirname}/index.html`);

  // 打开开发工具页面
  win.webContents.openDevTools();

  // 当窗口关闭时调用的方法
  win.on('closed', () => {
    // 解除窗口对象的引用,通常而言如果应用支持多个窗口的话,你会在一个数组里存放窗口对象,在窗口关闭的时候应当删除相应的元素。
    win = null;
  });
}

// 当Electron完成初始化并且已经创建了浏览器窗口,则该方法将会被调用。有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);

// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', () => {
  // 对于OS X系统,应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 对于OS X系统,当dock图标被点击后会重新创建一个app窗口,并且不会有其他窗口打开
  if (win === null) {
    createWindow();
  }
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <base href="./">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

若是搭配Angular CLI使用,可以透過下列方式結合:

cd first-app_2017-09-14 // 進入該目錄
npm install  // 安裝函式庫
ng build --prod  // 建立程式,會產生dist目錄
  • 將dist目錄複製到Electron根目錄下

執行

electron-prebuilt 是Electron內建的npm模組,若該模組已經安裝,則可以直接執行:

electron .

// 若未使用global 參數安裝,則可以使用:
./node_modules/.bin/electron .

直接使用 Electron-starter專案

元件介紹

  • IPC(Inter Process Communication System)
    • 透過 event 讓不同的 Process 彼此溝通

布署

npm install -d electron-packager --save // 安裝布署工具
  • electron-packager 命令列語法如下:
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

sourcedir:表示來源資料夾,. 表示當前來源為資料夾。
appname:輸出的執行檔名稱。
--platform:表示要建置的平台,目前有:linux、win32、darwin,、mas、all。
--arch:表示目前系統架構,選項有:ia32、x64、armv7l、arm64、all。

其他資訊可以參考官方文件

包裝專案

  • Windows
    • 64 位元版本
electron-packager . WinApp --platform=win32 --arch=x64 --asar --overwrite
// --asar 參數可以封裝程式碼不讓人看到
  • 如果資料夾已經存在,請先移除,否則請加上 –overwrite 參數來覆寫。
C:\.\electron\electron.exe your-app\

Linux 64位元版本

electron-packager . LinuxApp --platform=linux --arch=x64 --asar
$>./electron/electron your-app/
  • 將編譯所產生的 LinuxApp-linux-x64 資料夾複製至 Linux 64位元系統(筆者測試環境是 Ubuntu 17 64位元),並執行 LinuxApp,可以看到跟 Winodws 一樣的結果。

Linux ARM 版本

electron-packager . ARMApp --platform=linux --arch=armv7l --asar
  • 將編譯所產生的 ARMApp-linux-armv7l 資料夾複製至 Linux ARM 系統(筆者測試環境硬體是 Raspberry Pi 3,系統是 Raspbian),並執行 ARMApp,可以看到跟 Winodws 一樣的結果。

OSX

Electron.app

 
gt;./Electron.app/Contents/MacOS/Electron your-app/ 

electron-packager npm module

electron-packager /Users/sp_electron MarvelBrowse --platform=darwin --arch=x64 --version=0.36.10 --out=/Users/Workspace --overwrite --icon=/Users/Workspace/sp_electron/marvel-app.icns

Wine

參考資料