从零到一：手把手教你用 Electron 构建第一个桌面应用什么是 Electron？ Electron是一个使用 Ja

什么是 Electron？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

主要特点：

跨平台：一次编写，支持 Windows、macOS 和 Linux 等操作系统。
原生功能：Electron 提供了对操作系统本地功能的访问，比如文件系统、通知、系统托盘等。
强大的开发工具：Electron 使用 Chromium 内核，支持开发者使用现代浏览器开发工具进行调试。
集成 Node.js：你可以使用 Node.js 的强大功能来处理文件、网络请求、系统任务等。

安装 Electron

你可以通过 npm（Node.js 的包管理工具）来安装 Electron。在终端中运行以下命令：

npm install electron --save-dev

这个命令会将 Electron 安装为开发依赖。安装完成后，你可以在项目中开始使用 Electron。

创建第一个 Electron 应用

下面是一个简单的 Electron 应用实例，演示了如何创建一个最基本的桌面应用。

1. 初始化项目

首先，创建一个新的项目文件夹，并初始化一个新的 npm 项目：

mkdir my-electron-app
cd my-electron-app
npm init -y

这会生成一个 package.json 文件，作为项目的配置文件。

2. 安装 Electron

接下来，安装 Electron：

npm install electron --save-dev

3. 创建主进程脚本

在项目目录中，创建一个名为 main.js 的文件，作为 Electron 应用的主进程。这个文件将负责管理应用窗口的创建。

// main.js

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

let mainWindow;

function createWindow() {
    // 创建浏览器窗口
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    // 加载应用的 HTML 文件
    mainWindow.loadFile('index.html');

    // 当窗口关闭时，释放窗口对象
    mainWindow.on('closed', () => {
        mainWindow = null;
    });
}

// Electron 初始化完成后创建窗口
app.whenReady().then(createWindow);

// 当所有窗口都关闭时退出应用（macOS 上的行为不同）
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

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

4. 创建前端界面

在项目目录下创建一个 index.html 文件，用于渲染应用的前端界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron App</title>
</head>
<body>
    <h1>Hello, Electron!</h1>
    <p>Welcome to your first Electron app.</p>
</body>
</html>

5. 修改 `package.json`

在 package.json 文件中，添加一个 start 脚本来启动 Electron 应用：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^33.3.1"
  }
}

6. 启动应用

现在，你可以通过以下命令来启动 Electron 应用：

npm run start

如果一切顺利，你应该会看到一个包含 "Hello, Electron!" 的窗口，这就是你创建的第一个 Electron 应用。

Electron 的架构

Electron 应用的架构主要分为两部分：

主进程（Main Process） ：负责应用的生命周期和操作系统资源的管理。它会启动一个或多个渲染进程，并控制它们的行为。
渲染进程（Renderer Process） ：负责显示用户界面，渲染 HTML、CSS 和 JavaScript。每个打开的窗口都对应一个渲染进程。

从零到一：手把手教你用 Electron 构建第一个桌面应用