4.1 創建主窗口
主窗口是 Electron 應用啟動后顯示的第一個窗口，通常用來承載應用的主界面。我們使用 BrowserWindow 類來創建主窗口。
4.1.1 創建主窗口的基礎代碼
// 引入 Electron 模塊和 Node.js 的 path 模塊
const { app, BrowserWindow } = require('electron');
const path = require('path');// 定義一個變量用于存儲主窗口對象
let mainWindow;// 創建主窗口的函數
const createMainWindow = () => {// 實例化 BrowserWindow 對象mainWindow = new BrowserWindow({width: 800, // 窗口寬度height: 600, // 窗口高度webPreferences: {preload: path.join(__dirname, 'preload.js'), // 指定預加載腳本contextIsolation: true, // 啟用上下文隔離nodeIntegration: false // 禁用 Node.js 集成}});// 加載主窗口的 HTML 文件mainWindow.loadFile('index.html');// 打開開發者工具（僅在開發階段使用）mainWindow.webContents.openDevTools();// 監聽主窗口的關閉事件mainWindow.on('closed', () => {// 當窗口被關閉時，將 mainWindow 設置為 nullmainWindow = null;});
};// 當 Electron 完成初始化并準備創建瀏覽器窗口時，調用 createMainWindow 函數
app.on('ready', createMainWindow);// 當所有窗口關閉時，退出應用（除非在 macOS 上）
app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});// 當應用被激活時（例如在 macOS 上單擊應用圖標），重新創建主窗口
app.on('activate', () => {if (mainWindow === null) {createMainWindow();}
});
4.2 創建子窗口
子窗口用于顯示輔助內容或執行輔助任務。與主窗口類似，子窗口也是通過 BrowserWindow 類創建的。
4.2.1 創建子窗口的示例代碼
// 創建子窗口的函數
const createChildWindow = () => {// 實例化 BrowserWindow 對象let childWindow = new BrowserWindow({parent: mainWindow, // 設置父窗口為主窗口modal: true, // 設置為模態窗口width: 400, // 窗口寬度height: 300, // 窗口高度webPreferences: {preload: path.join(__dirname, 'preload.js'), // 指定預加載腳本contextIsolation: true, // 啟用上下文隔離nodeIntegration: false // 禁用 Node.js 集成}});// 加載子窗口的 HTML 文件childWindow.loadFile('child.html');// 監聽子窗口的關閉事件childWindow.on('closed', () => {// 當窗口被關閉時，將 childWindow 設置為 nullchildWindow = null;});
};// 在主窗口創建完成后創建子窗口
app.on('ready', () => {createMainWindow();createChildWindow();
});
4.3 窗口間通信
通過 IPC 機制，主窗口和子窗口可以相互通信。這里使用 ipcMain 和 ipcRenderer 模塊實現通信。
4.3.1 主窗口與子窗口之間的通信示例
主進程：
const { ipcMain } = require('electron');// 監聽從渲染進程發送的消息
ipcMain.on('message-from-child', (event, arg) => {console.log('Received message from child:', arg);// 回復消息到渲染進程event.reply('reply-from-main', 'Message received by main process');
});
4.4 預加載腳本
預加載腳本在渲染進程加載前執行，允許在渲染器上下文中暴露自定義 API，并提供與主進程安全通信的橋梁。
4.4.1 創建預加載腳本
preload.js：
const { contextBridge, ipcRenderer } = require('electron');// 使用 contextBridge 將安全的 API 暴露給渲染進程
contextBridge.exposeInMainWorld('electronAPI', {sendMessage: (message) => ipcRenderer.send('message-from-child', message),onReply: (callback) => ipcRenderer.on('reply-from-main', (event, args) => callback(args))
});
4.4.2 在渲染進程中使用預加載腳本
子窗口（渲染進程）：
<!DOCTYPE html>
<html><head><title>Child Window</title></head><body><h1>Child Window</h1><button id="sendMessageBtn">Send Message to Main</button><script>// 使用預加載腳本暴露的 APIdocument.getElementById('sendMessageBtn').addEventListener('click', () => {window.electronAPI.sendMessage('Hello from child window');});window.electronAPI.onReply((message) => {console.log('Received reply from main:', message);});</script></body>
</html>
4.5 管理多個窗口
在復雜的應用中，可能需要同時管理多個窗口。可以通過存儲窗口實例的數組或對象來實現這一點。
4.5.1 管理多個窗口的示例
const windows = {};// 創建子窗口的函數
const createChildWindow = (windowName) => {let childWindow = new BrowserWindow({parent: mainWindow,modal: true,width: 400,height: 300,webPreferences: {preload: path.join(__dirname, 'preload.js'),contextIsolation: true,nodeIntegration: false}});childWindow.loadFile('child.html');childWindow.on('closed', () => {// 當窗口被關閉時，從 windows 對象中刪除對應的實例delete windows[windowName];});// 將窗口實例存儲到 windows 對象中windows[windowName] = childWindow;
};// 創建多個子窗口
app.on('ready', () => {createMainWindow();createChildWindow('child1');createChildWindow('child2');
});
4.6 窗口的顯示和隱藏
有時需要在應用中顯示或隱藏窗口，而不是創建或銷毀它們。
4.6.1 顯示和隱藏窗口的示例
// 顯示子窗口
const showChildWindow = (windowName) => {if (windows[windowName]) {windows[windowName].show();}
};// 隱藏子窗口
const hideChildWindow = (windowName) => {if (windows[windowName]) {windows[windowName].hide();}
};// 在主窗口創建完成后創建子窗口并演示顯示和隱藏功能
app.on('ready', () => {createMainWindow();createChildWindow('child1');// 隱藏子窗口 child1hideChildWindow('child1');// 2 秒后顯示子窗口 child1setTimeout(() => {showChildWindow('child1');}, 2000);
});
通過本章內容，你已經了解了如何在 Electron 中創建和管理主窗口及子窗口，包括如何進行窗口間通信、使用預加載腳本提高安全性、管理多個窗口以及顯示和隱藏窗口的操作。在接下來的章節中，我們將進一步探討如何實現更多高級功能和最佳實踐，幫助你進一步掌握 Electron 開發。
)
