Electron 第一行程式碼
在現代軟體開發的世界中，跨平台桌面應用程式的需求日益增長。Electron 框架應運而生，它讓開發者能夠使用熟悉的 Web 技術（HTML、CSS 和 JavaScript）來建立原生桌面應用程式。今天，我將帶領你一步步從零開始，打造一個簡單的 Electron 應用程式。
為什麼選擇 Electron？
Electron 最初由 GitHub 開發維護，是當前最主流的跨平台桌面應用框架。根據最新調查報告，Electron 在桌面應用框架使用率排名第一。其代表性應用包含：VS Code（微軟開發工具）、Notion（生產力工具）、Spotify（音樂串流）、Slack（企業協作）、Discord（社群平台）...等。更多應用範例可以參考 Electron 官網：ShowCase。
Electron Showcase
- 跨平台兼容性：一次編寫，可在 Windows、macOS 和 Linux 上運行
- 使用熟悉的 Web 技術：無需學習新的程式語言
- 豐富的 API：可以訪問系統資源和原生功能
- 活躍的社群支持：大量的文檔和資源
環境準備
在開始之前，我們需要確保開發環境已經準備就緒。
安裝 Node.js
Electron 是基於 Node.js 的，所以首先需要安裝 Node.js。建議使用最新的 LTS（長期支援）版本，可以從 Node.js 官方網站 下載並安裝。
Node.js 官網
安裝完成後，打開終端機，輸入以下命令確認 Node.js 和 npm 已正確安裝：
node -v
npm -v
如果顯示版本號，就表示安裝成功了！
創建你的第一個 Electron 專案
步驟 1：建立專案資料夾
首先，讓我們創建一個新的資料夾來存放我們的專案：
mkdir electron-hello-world
cd electron-hello-world
步驟 2：初始化 npm 專案
在資料夾中運行以下命令來初始化一個 npm 專案，這將創建一個 package.json 檔案：
npm init -y
步驟 3：安裝 Electron
接下來，安裝 Electron 作為開發依賴：
npm install --save-dev electron
編寫應用程式
現在，讓我們開始編寫我們的應用程式程式碼。
步驟 1：創建主進程檔案
在專案資料夾中創建一個名為 main.js 的檔案，這是 Electron 應用程式的入口點：
const { app, BrowserWindow } = require('electron');
const path = require('path');
// 創建瀏覽器視窗的函數
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
// 載入 HTML 檔案
mainWindow.loadFile('index.html');
// 開發時可以打開開發者工具
// mainWindow.webContents.openDevTools();
}
// 當 Electron 完成初始化並準備創建瀏覽器視窗時調用此方法
app.whenReady().then(() => {
createWindow();
// 在 macOS 上，當點擊 dock 圖標且沒有其他視窗打開時，
// 通常會重新創建一個視窗
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// 當所有視窗關閉時退出應用（Windows & Linux）
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit();
});
步驟 2：創建 HTML 檔案
接下來，創建一個名為 index.html 的檔案，作為我們應用程式的使用者介面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello Electron!</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
margin: 0;
padding: 20px;
text-align: center;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2c3e50;
}
p {
line-height: 1.6;
}
.logo {
width: 150px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>HKT線上教室</h1>
<p>恭喜你成功創建了第一個 Electron 應用程式！</p>
<p>這是一個使用 HTML、CSS 和 JavaScript 構建的跨平台桌面應用程式。</p>
</div>
</body>
</html>
步驟 3：更新 package.json
在 package.json 中添加一個啟動腳本，以便可以輕鬆運行應用：
"scripts": {
"start": "electron ."
},
"main": "main.js"
⚠️ 注意：預設是 "main": "index.js"，要修改 "main": "main.js"，務必將 main 指向正確的入口文件（建議使用 main.js）⚠️
運行你的應用程式
現在，讓我們運行我們的 Electron 應用程式！在終端中執行：
npm start如果一切順利，你應該會看到一個顯示「Hello Electron!」的視窗。恭喜！你已經成功創建了你的第一個 Electron 應用程式。
Hello World
打包你的應用程式
開發完成後，你可能想要將應用程式打包成可執行檔，以便分享給其他人。Electron 提供了多種打包工具，如 electron-builder、electron-packager 等。
以下是使用 electron-builder 的簡單示例：
- 安裝 electron-builder：
npm install --save-dev electron-builder
- 在
package.json中添加打包配置："build": {
"appId": "com.yourname.electron-hello-world",
"productName": "Hello Electron",
"directories": {
"output": "dist"
},
"win": {
"target": "nsis"
},
"mac": {
"target": "dmg"
},
"linux": {
"target": "AppImage"
}
},
"scripts": {
"start": "electron .",
"build": "electron-builder"
} - 運行打包命令：
npm run build
總結與下一步
通過這篇教學，你已經學會了如何從零開始創建一個簡單的 Electron 應用程式。這只是 Electron 開發的起點，接下來你可以：
- 學習如何使用 IPC（進程間通信）在主進程和渲染進程之間通信
- 探索 Electron 的原生 API，如系統通知、檔案對話框等
- 整合前端框架如 React、Vue 或 Angular
- 實現自動更新功能
- 優化應用程式的性能和安全性
Electron 的世界充滿了可能性，希望這篇教學能夠激發你的創造力，開始你的 Electron 開發之旅！
