如何使用 Electron 构建一个待办事项（To-Do List）应用

个人首页： VON
鸿蒙系列专栏：鸿蒙开发小型案例总结
综合案例：鸿蒙综合案例开发
鸿蒙6.0：从0开始的开源鸿蒙6.0.0
鸿蒙5.0：鸿蒙5.0零基础入门到项目实战
本文章所属专栏：Electron for OpenHarmony

如何使用 Electron 构建一个待办事项（To-Do List）应用

- - [如何使用 Electron 构建一个待办事项（To-Do List）应用](#如何使用 Electron 构建一个待办事项（To-Do List）应用)

如何使用 Electron 构建一个待办事项（To-Do List）应用

在本技术博客中，我们将探讨如何使用 Electron 框架创建一个简单的待办事项（To-Do List）应用程序。此项目适合那些想要学习如何结合 HTML、CSS 和 JavaScript 来构建跨平台桌面应用程序的开发者。

一、项目初始化

首先，确保你已经安装了 Node.js 和 npm。接下来，打开终端并运行以下命令来初始化你的项目：

bash 复制代码

mkdir todo-app
cd todo-app
npm init -y

然后安装 Electron：

bash 复制代码

npm install electron --save-dev

二、项目结构

建立如下的文件夹和文件结构：

复制代码

todo-app/
├── main.js
├── index.html
├── renderer.js
└── package.json

三、编写代码

1. main.js

这是 Electron 应用程序的入口点，负责创建窗口和管理应用生命周期事件。

javascript 复制代码

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'renderer.js')
        }
    });

    win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

2. index.html

这是你的应用的主要界面，用户将与之交互以添加或删除待办事项。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To-Do List App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app">
        <h1>我的待办事项</h1>
        <input type="text" id="new-todo" placeholder="添加新任务...">
        <button id="add">添加</button>
        <ul id="todos"></ul>
    </div>
    <script src="renderer.js"></script>
</body>
</html>

3. renderer.js

这个脚本控制着你的应用的业务逻辑，比如添加或删除待办事项。

javascript 复制代码

document.getElementById('add').addEventListener('click', () => {
    const todoText = document.getElementById('new-todo').value;
    if (todoText.trim()) {
        const li = document.createElement('li');
        li.textContent = todoText;
        li.addEventListener('click', () => {
            li.remove();
        });
        document.getElementById('todos').appendChild(li);
        document.getElementById('new-todo').value = '';
    }
});

四、运行你的应用

现在，你应该能看到一个简单的 To-Do List 应用程序，允许用户添加和点击删除待办事项。

结论

通过本文，我们学习了如何从头开始创建一个基本的待办事项应用程序使用 Electron。尽管这是一个非常基础的例子，但它为构建更复杂的应用打下了良好的基础。希望这能激发你进一步探索 Electron 的潜力！