Electron開發跨平台桌面程式入門教程

  • 2019 年 10 月 25 日
  • 筆記

最近一直在學習 Electron 開發桌面應用程式,在嘗試了 java swing 和 FXjava 後,感嘆還是 Electron 開發桌面應用上手最快。我會在這一篇文章中實現一個HelloWord的應用程式,記錄學習過程中的坑。

Electron是什麼呢?

Electron 可以讓你使用純 JavaScript 調用豐富的原生(作業系統) APIs 來創造桌面應用。 你可以把它看作一個 Node. js 的變體,它專註於桌面應用而不是 Web 伺服器端。

這不意味著 Electron 是某個圖形用戶介面(GUI)庫的 JavaScript 版本。 相反,Electron 使用 web 頁面作為它的 GUI,所以你能把它看作成一個被 JavaScript 控制的,精簡版的 Chromium 瀏覽器。

一、環境準備

本地環境:Node.js + npm

# 下面這行的命令會列印出Node.js的版本資訊  node -v    # 下面這行的命令會列印出npm的版本資訊  npm -vCopy

二、目錄結構

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

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

為你的新Electron應用創建一個新的空文件夾,並新建上述三個文件。

三、package.json

其中package.json的文件內容如下:

{    "name": "my-app",    "version": "0.1.0",    "description": "",    "main": "main.js",    "scripts": {      "start": "electron ."    },    "author": "",    "license": "ISC"  }

Tips:使用npm init命令可以便捷創建package.json

四、安裝Electron

在終端進入到工程文件夾下進行操作,會在當前目錄下安裝Electron。

# 局部安裝 需要的話追加上 --registry='http://registry.npm.taobao.org' 使用淘寶npm源安裝  npm install electron --save-dev  # Windows使用下面語句 64位32位機器都是--win32  npm install electron --save-dev --platform=win32    # 驗證安裝  node_modules/.bin/electron -v

Tips:–save-dev參數會在package.json文件中導入該依賴到devDependencies屬性下,–save參數會導入該依賴到dependencies屬性下。

安裝過程可能會很慢,正常的話,安裝下載進度如下直至完成。

> [email protected] postinstall /home/qii/electron/eee/node_modules/electron  > node install.js    Downloading tmp-26643-1-SHASUMS256.txt-5.0.6  [============================================>] 100.0% of 4.74 kB (4.74 kB/s)  npm notice created a lockfile as package-lock.json. You should commit this file.    + [email protected]  updated 1 package and audited 201 packages in 499.235s  found 0 vulnerabilities

Tips:npm安裝超時的話一般是網路問題。解決方法

五、main.js

package.json中指定的入口點文件,即程式主文件。

const {app, BrowserWindow} = require('electron')    let mainWindow    // 創建主窗口,設置了寬高等資訊  function createWindow () {    mainWindow = new BrowserWindow({      width: 1000,      height: 600,      webPreferences: {        // node集成,即是否注入node能力        nodeIntegration: true      }    })      // 載入主頁面內容 index.html    mainWindow.loadFile('index.html')      mainWindow.on('closed', function () {      mainWindow = null    })  }    app.on('ready', createWindow)

六、index.html

main.js中載入的主窗口文件,即主布局文件

<!DOCTYPE html>  <html>  <head>      <!-- 此title會覆蓋package.json中設置的name,作為應用頂部名稱 -->      <title>my-app</title>  </head>  <body>      Hello World!  </body>  </html>

七、啟動應用

在創建並初始化完成 main.jsindex.htmlpackage.json之後,您就可以在當前工程的根目錄執行下述命令來啟動剛剛編寫好的Electron程式了。

# 進入到包含 package.json 文件的目錄  npm satrt    # 或者直接使用腳本啟動,別忽略了後面的點  node_modules/.bin/electron .

啟動圖

八、打包應用

以上所述都是在本地開發環境下使用,但如果要給被人使用,就必須得將Electron打包成一個程式包。幸運的是我們可以通過electron-builder將程式打包成Win、Linux、Mac平台都兼容的版本,交給別人之後直接安裝即可。

1、安裝electron-builder

npm install --save-dev electron-builder    # 驗證安裝  node_modules/.bin/electron-builder -h

2、開始打包

注意生成各自平台的程式包最好在對應平台上執行,否則可能打包失敗

# Linux打包成AppImage文件(在Linux環境上執行)  node_modules/.bin/electron-builder -l AppImage    # Windows打包成exe安裝文件(在Windows環境下執行)  node_modules/.bin/electron-builder -w nsis  # 如果在非Windows上打包win程式,也可以藉助docker 如下  # docker run --rm -it -v ${PWD}:/project electronuserland/builder:wine sh -c "node_modules/.bin/electron-builder -w nsis"    # Mac打包成dmg文件(在Mac環境下執行)  node_modules/.bin/electron-builder -m dmg

3、最終文件

打包好的程式在當前目錄dist文件夾下,如圖所示:

  • Linux生成my-app 0.1.0.AppImage文件,雙擊執行或者./my-app 0.1.0.AppImage執行即可。
  • Windows生成my-app 0.1.0.exe文件,雙擊安裝即可。
  • Mac生成my-app 0.1.0.dmg,雙擊拖拽安裝即可。

安裝圖

4、利用配置文件打包

上面的方法相當於臨時打包,每次運行命令的時候都要指定打包命令,雖然很直接,但是有點不太方便,下面用另一種方法來打包,將打包配置寫到package.json中 ,方便使用。

打開package.json文件,發現前面的 devDependencies 屬性下已經多出了 electron 和 electron-builder 依賴,我們將與打包相關的配置資訊全部寫在build屬性下,再添加腳本命令"dist": "electron-builder"

{    "name": "my-app",    "version": "0.1.0",    "description": "",    "main": "main.js",    "scripts": {      "start": "electron .",      "dist": "electron-builder"    },    "author": "",    "license": "CC0-1.0",    "devDependencies": {      "electron": "^6.0.12",      "electron-builder": "^21.2.0"    },    "build": {      "win": {        "icon": "icon.png",        "target": [          "nsis"        ]      },      "nsis": {        "allowToChangeInstallationDirectory": true,        "oneClick": false,        "menuCategory": true,        "allowElevation": false      },      "linux": {        "icon": "icon.png",        "category": "Utility",        "target": [          "AppImage"        ]      },      "mac": {        "icon": "icon.png",        "type": "development",        "category": "public.app-category.developer-tools",        "target": [          "dmg"        ]      }    }  }

運行命令:

npm run dist

九、進階之路

Electron給我的認識是使用HTML文件渲染頁面組件、使用CSS渲染頁面組件的樣式,使用JavaScript編寫程式的邏輯,且支援Node以及DOM的API。

我在學習Electron的時候,寫了一個本地音樂播放器的小項目,在這個項目中涉及了主進程與渲染進程如何通訊,如何使用CSS樣式,如何使用electron-store本地存儲。

項目的地址:https://github.com/yueshutong/SimpleMusicPlayer

歡迎Star!

關於Electron的進階學習,我推薦下面幾個學習網站:

Electron官方開發文檔

electron.build官方配置文檔

electron-store本地文件存儲

icns圖標生成指南

Web開發者指南-MDN文檔

一款字體圖標庫

Electron 打包優化