Electron入门指南：用Web技术开发跨平台桌面应用

1. 初识Electron：用Web技术构建桌面应用

如果你是一名前端开发者，想要尝试开发桌面应用但又不想学习全新的技术栈，Electron绝对是你的最佳选择。简单来说，Electron让你能够用熟悉的HTML、CSS和JavaScript来构建跨平台的桌面应用程序。想象一下，你平时写的网页代码，现在可以直接变成Windows、macOS或Linux上的原生应用，是不是很酷？

Electron的核心原理其实并不复杂：它把Chromium浏览器引擎和Node.js运行时打包在一起。Chromium负责渲染界面（就像Chrome浏览器显示网页一样），而Node.js则提供了访问操作系统底层API的能力（比如文件系统、系统托盘等）。这种组合让Web开发者能够用自己熟悉的技术栈，开发出功能强大的桌面应用。

你可能已经在不知不觉中使用过很多基于Electron开发的应用：VS Code、Slack、Discord、Figma...这些知名应用都选择了Electron作为它们的开发框架。Electron的优势很明显：

• 跨平台：一套代码可以打包成Windows、macOS和Linux的应用
• 开发效率高：使用成熟的Web技术栈，无需学习新语言
• 生态丰富：可以直接使用npm上的海量前端包
• 原生能力：通过Node.js可以调用系统级API

2. 环境准备与项目初始化

2.1 Node.js环境配置

在开始Electron开发前，我们需要确保开发环境已经准备就绪。Electron依赖于Node.js环境，因此首先需要安装Node.js。

建议安装最新的LTS版本(Node.js 18.x或更高版本)，以获得最佳兼容性和性能表现。

安装完成后，打开终端或命令行工具，运行以下命令验证安装是否成功：

bash复制node -v
npm -v

如果看到版本号输出（如v18.16.1），说明安装成功。如果提示命令未找到，可能需要手动将Node.js添加到系统PATH环境变量中。

2.2 创建Electron项目

接下来，我们初始化一个新的Electron项目。创建一个空文件夹作为项目根目录，然后执行：

bash复制npm init -y

这会生成一个默认的package.json文件。我们需要对这个文件进行一些修改，特别是添加Electron相关的配置。

json复制{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  }
}

关键配置说明：

• main字段指定了Electron应用的入口文件（通常是main.js）
• scripts中的start命令用于启动开发环境
• build命令用于后续打包应用（需要先安装electron-builder）

2.3 安装Electron依赖

现在我们可以安装Electron作为项目依赖：

bash复制npm install --save-dev electron

安装完成后，建议检查package.json中的devDependencies部分，确认electron已被正确添加。安装过程可能会花费一些时间，因为Electron需要下载对应平台的二进制文件。

3. 第一个Electron应用：Hello World

3.1 创建主进程文件

在项目根目录下创建main.js文件，这是Electron应用的入口文件。Electron应用采用主进程-渲染进程的架构：

javascript复制const { app, BrowserWindow } = require('electron')

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

  // 加载本地HTML文件
  win.loadFile('index.html')
}

// 当Electron完成初始化后调用createWindow
app.whenReady().then(createWindow)

// 所有窗口关闭时退出应用（macOS除外）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// macOS上点击dock图标时重新创建窗口
app.on('activate'