首页

主题

实战待办事项应用 ​

开发一个待办事项应用是一个很好的项目，不仅可以帮助你熟悉 Electron 的基本功能，还能让你实践前端和后端的集成。下面我将指导你如何使用 Electron 和一些前端技术（如 React 或 Vue）来构建一个简单的待办事项应用。

1. 环境准备 ​

确保你已经安装了 Node.js 和 npm。然后全局安装 Electron 和 Electron-builder：

bash
npm install -g electron electron-builder

2. 创建项目结构 ​

创建一个新的文件夹作为你的项目目录，并初始化一个新的 npm 项目：

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

接下来，安装 Electron 和 React（或 Vue），以及一些其他的依赖包：

bash
npm install electron react react-dom @types/react @types/react-dom concurrently wait-on ts-node

3. 配置项目 ​

在项目根目录下创建以下文件和文件夹：

  • src: 存放源代码。
  • public: 存放静态资源。
  • index.ts: 主进程入口文件。
  • main.ts: 渲染进程入口文件。
  • package.json: 更新 "scripts" 部分以支持 Electron 和 React 的同时运行。

4. 编写主进程代码 ​

在 src 文件夹中创建 index.ts 文件，这是 Electron 主进程的入口：

typescript
import { app, BrowserWindow } from 'electron';

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    });

    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();
    }
});

5. 编写渲染进程代码 ​

在 public 文件夹中创建 index.html 文件，这将是你的应用的主界面：

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Todo App</title>
</head>
<body>
    <div id="root"></div>
    <script src="./renderer.js"></script>
</body>
</html>

在 src 文件夹中创建 renderer.tsx 文件，使用 React 构建 UI：

tsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const TodoApp = () => {
    const [todos, setTodos] = useState<string[]>([]);
    const [inputValue, setInputValue] = useState('');

    const addTodo = () => {
        setTodos([...todos, inputValue]);
        setInputValue('');
    };

    return (
        <div>
            <h1>Todo List</h1>
            <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
            <button onClick={addTodo}>Add</button>
            <ul>
                {todos.map((todo, index) => (
                    <li key={index}>{todo}</li>
                ))}
            </ul>
        </div>
    );
};

ReactDOM.render(<TodoApp />, document.getElementById('root'));

6. 更新 package.json ​

修改 package.json 中的 "scripts" 部分，添加启动 Electron 和编译 TypeScript 的命令：

json
"scripts": {
    "start": "concurrently \"tsc -w\" \"wait-on http://localhost:3000 && electron .\"",
    "build": "electron-builder"
},

7. 运行和打包 ​

运行 npm start 来启动应用，然后使用 npm run build 打包应用。

这样，你就完成了一个基本的待办事项应用的开发。你可以根据需要添加更多的功能，如编辑和删除任务，或者使用本地存储来保存数据。