Electron開發跨平臺桌面程式入門教程
最近一直在學習 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 -vTips：--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 vulnerabilitiesTips：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.js、 index.html和package.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 -h2、開始打包
注意生成各自平臺的程式包最好在對應平臺上執行，否則可能打包失敗
# 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 dmg3、最終檔案
打包好的程式在當前目錄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 打包優化