只需要6步, 用 Electron 開發一個記事本, 帶開啟,編輯,保存 功能。可以很方便編譯成Windows、macOS或Linux的安裝包
1.初始化計畫
首先，你需要建立一個新的計畫目錄並初始化它：
mkdir electron-notepad
cd electron-notepad
npm init -y
2. 安裝Electron
安裝Electron作為計畫的依賴：
npm install electron --save-dev
3. 建立主行程檔
在計畫根目錄下建立
main.js
，這將是Electron的主行程檔：
const { app, BrowserWindow } = require('electron');
functioncreateWindow () {
// 建立瀏覽器視窗
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// 載入index.html檔
win.loadFile('index.html');
}
app.on('ready', createWindow);
4. 建立HTML檔
在計畫根目錄下建立
index.html
，這將是記事本的界面：
<!DOCTYPE html>
<html>
<head>
<title>Electron Notepad</title>
</head>
<body>
<textareaid="notepad" style="width: 100%; height: 90%;"></textarea>
<br>
<buttononclick="save()">保存</button>
<buttononclick="load()">開啟</button>
<script>
const { ipcRenderer } = require('electron');
functionsave() {
let text = document.getElementById('notepad').value;
ipcRenderer.send('save-text', text);
}
functionload() {
ipcRenderer.send('load-text');
}
ipcRenderer.on('received-text', (event, text) => {
document.getElementById('notepad').value = text;
});</script>
</body>
</html>
5. 添加IPC通訊
在
main.js
中添加IPC通訊，以便在Electron的主行程和渲染行程之間傳遞數據：
const { ipcMain } = require('electron');
ipcMain.on('save-text', (event, text) => {
// 這裏可以添加保存檔的邏輯
console.log('Text saved:', text);
});
ipcMain.on('load-text', (event) => {
// 這裏可以添加載入檔的邏輯
event.reply('received-text', 'This is loaded text.');
});
6. 編譯安裝包
要編譯Electron應用程式為Windows、macOS或Linux的安裝包，你可以使用
electron-packager
或
electron-builder
。以下是使用
electron-builder
的步驟：
安裝
electron-builder：
npm install electron-builder --save-dev
在
package.json中添加構建指令碼：
"scripts": {
"start": "electron .",
"dist": "electron-builder"
}
執行構建命令：
對於Windows：
npm run dist --win
對於macOS：
npm run dist --mac
對於Linux：
npm run dist --linux
請註意，這個範例是一個基礎的起點，實際的應用程式可能需要更多的錯誤處理、檔路徑管理和其他功能。此外，Electron和相關工具的API可能會隨時間更新，所以請確保檢視最新的文件和指南。
