4.3 主进程
在main.js中添加以下代码：
const {
app, BrowserWindow, ipcMain } = require('electron');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.loadFile('src/index.html');
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
ipcMain.on('add-task', (event, task) => {
mainWindow.webContents.send('task-added', task);
});
4.4 渲染进程
在renderer.js中添加以下代码：
const {
ipcRenderer } = require('electron');
const taskList = document.getElementById('task-list');
const taskInput = document.getElementById('task-input');
const addButton = document.getElementById('add-button');
addButton.addEventListener('click', () => {
const task = taskInput.value;
if (task) {
ipcRenderer.send('add-task', task);
taskInput.value = '';
}
});
ipcRenderer.on('task-added', (event, task) => {
const taskItem = document.createElement('div');
taskItem.textContent = task;
taskList.appendChild(taskItem);
});
4.5 运行应用
在package.json中添加以下脚本：
"scripts": {
"start": "electron ."
}
现在，你可以运
行应用：
npm start
5. 结论
本文介绍了Electron框架的基本概念，并通过一个简单的任务管理器应用演示了如何使用Electron进行前端桌面应用开发。Electron为前端开发者提供了跨平台桌面应用开发的新可能性，通过结合Web技术和Node.js，你可以创建出强大且具有原生体验的桌面应用。
希望本文能帮助你了解Electron，并激发你对前端桌面应用开发的兴趣。
