【保姆级超详细还免费】Electron 项目教程

2026-01-16 09:18:17作者：羿妍玫Ivan

1. 项目的目录结构及介绍

Electron 项目的目录结构通常包含以下几个主要部分：

package.json: 项目的元数据文件，包括依赖、脚本、项目名称等。
main.js: 主进程文件，负责创建窗口和管理应用生命周期。
index.html: 主窗口的 HTML 文件，用于渲染用户界面。
renderer.js: 渲染进程文件，处理用户界面逻辑。
node_modules: 存放项目依赖的目录。
assets: 存放静态资源，如图片、样式文件等。

electron-project/
├── package.json
├── main.js
├── index.html
├── renderer.js
├── node_modules/
└── assets/
    ├── styles.css
    └── logo.png

2. 项目的启动文件介绍

`main.js`

main.js 是 Electron 应用的主进程文件，负责创建和管理应用窗口以及处理系统事件。以下是一个简单的 main.js 示例：

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

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

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

`index.html`

index.html 是主窗口的 HTML 文件，用于定义用户界面结构。以下是一个简单的 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>
  <link rel="stylesheet" href="assets/styles.css">
</head>
<body>
  <h1>Welcome to Electron</h1>
  <script src="renderer.js"></script>
</body>
</html>

3. 项目的配置文件介绍

`package.json`

package.json 是 Node.js 项目的配置文件，包含项目的基本信息和依赖管理。以下是一个简单的 package.json 示例：

{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^16.0.0"
  }
}

`.electron-forge`

如果使用 Electron Forge 来构建和管理项目，还会包含 .electron-forge 目录，用于配置构建和打包选项。

{
  "make_targets": {
    "win32": ["squirrel"],
    "darwin": ["zip"],
    "linux": ["deb", "rpm"]
  },
  "electronPackagerConfig": {
    "packageManager": "npm"
  }
}