3.4 创建一个简单的窗口
在main.js中添加以下代码，以创建一个简单的窗口：
const {
app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.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();
}
});
3.5 构建和运行应用
在package.json中添加以下脚本，用于构建和运行应用：
"scripts": {
"start": "electron ."
}
现在，你可以运行应用：
npm start
4. 实践：创建一个任务管理器应用
让我们通过一个简单的实践项目来更好地理解Electron的使用。我们将创建一个简单的任务管理器应用，可以添加、编辑和删除任务。
4.1 项目结构
task-manager/
|-- src/
| |-- index.html
| |-- main.js
| |-- renderer.js
| |-- styles.css
|-- package.json
4.2 主页面
在index.html中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Task Manager</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<h1>Task Manager</h1>
<div id="task-list"></div>
<input type="text" id="task-input" placeholder="Enter a new task...">
<button id="add-button">Add Task</button>
</div>
<script src="renderer.js"></script>
</body>
</html>
