第1章：Electron 入门认知

1.1 什么是Electron？

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它由 GitHub 开发和维护，允许开发者使用熟悉的前端技术栈创建在 Windows、macOS 和 Linux 上运行的原生应用。

通俗定义：用前端技术开发跨平台桌面应用的框架，HTML+CSS+JS+Node.js

Electron 的核心架构由两部分组成：

主进程：负责应用的生命周期管理、窗口创建和原生功能访问
渲染进程：负责页面渲染和用户交互，本质上是一个 Chromium 浏览器实例

1.2 为什么要学Electron？

核心优势

跨平台：一次编写，多平台运行（Windows、macOS、Linux）
前端技术复用：使用熟悉的 HTML/CSS/JavaScript 开发桌面应用
开发效率高：丰富的 API 和生态系统，快速构建应用
原生功能访问：可以访问操作系统级别的功能（文件系统、系统通知等）
大型社区支持：背后有 GitHub 支持，社区活跃，资源丰富
成熟稳定：被众多知名应用采用，如 VS Code、Slack、Discord 等

1.3 Electron 的应用场景

Electron 适用于多种桌面应用场景：

1.3.1 桌面客户端

代码编辑器：如 Visual Studio Code
通讯工具：如 Slack、Discord
设计工具：如 Figma 桌面版
开发工具：如 Postman、GitHub Desktop

1.3.2 工具软件

系统工具：如文件管理器、系统监控工具
开发辅助工具：如 API 测试工具、数据库客户端
媒体工具：如音频播放器、视频编辑工具

1.3.3 跨平台应用

需要在多个操作系统上运行的企业应用
原型验证和快速开发的应用
从小规模应用到大型企业级应用

1.3.4 经典案例

Visual Studio Code：微软开发的代码编辑器，全球最流行的开发工具之一
Atom：GitHub 开发的文本编辑器
Slack：团队通讯工具
Discord：游戏社区通讯平台
Figma：协作设计工具
Postman：API 测试工具

1.4 Electron 与传统桌面开发的区别

维度	Electron	传统桌面开发
开发成本	低（使用前端技术）	高（需要学习特定语言）
技术栈	HTML/CSS/JavaScript	C++/C#/Java/Swift 等
跨平台能力	原生跨平台	需要为每个平台单独开发
开发速度	快（前端开发效率高）	慢（编译周期长）
性能	略逊于原生应用	原生性能更好
部署	打包为各平台安装包	需要为各平台单独编译
学习曲线	平缓（前端开发者容易上手）	陡峭（需要学习特定语言和框架）

1.5 学习前提：必备技术基础回顾

1.5.1 核心必备基础

HTML/CSS/JavaScript 基础
- 熟悉 HTML 标签和结构
- 掌握 CSS 样式和布局
- 理解 JavaScript 基本语法和 DOM 操作
Node.js 基础
- 了解 Node.js 运行环境
- 熟悉 npm 包管理工具
- 掌握基本的 Node.js API（如文件系统操作）

1.5.2 推荐学习资源

HTML/CSS/JavaScript：W3School、MDN Web Docs
Node.js：Node.js 官方文档、《Node.js 实战》

1.6 学习路线规划

1.6.1 新手学习重点

基础认知：理解 Electron 的核心概念和架构
环境搭建：掌握项目初始化和开发环境配置
核心 API：学习主进程、渲染进程和 IPC 通信
功能实现：掌握窗口操作、原生功能访问等核心功能
项目实战：通过小型项目巩固所学知识
打包部署：学习应用打包和分发

1.6.2 学习阶段

阶段一：基础入门（1-2周）
- 环境搭建和第一个应用
- 核心架构和基本概念
阶段二：核心功能（2-3周）
- 窗口管理和操作
- 进程间通信
- 原生功能访问
阶段三：实战应用（2-4周）
- 前端框架集成
- 完整项目开发
- 打包和部署

1.7 第一个Electron程序

1.7.1 项目初始化

创建项目目录

bash

mkdir my-electron-app
cd my-electron-app

初始化 npm 项目
bash
```
npm init -y
```
安装 Electron
bash
```
npm install electron --save-dev
```

1.7.2 创建核心文件

package.json 配置

json

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

main.js（主进程）

javascript

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

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })
  
  // 加载 index.html
  win.loadFile('index.html')
  
  // 打开开发工具
  win.webContents.openDevTools()
}

// 应用就绪后创建窗口
app.whenReady().then(() => {
  createWindow()
  
  // macOS 特定处理
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

index.html（渲染进程）

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello Electron!</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      padding: 0;
    }
    h1 {
      color: #333;
    }
    p {
      color: #666;
    }
  </style>
</head>
<body>
  <h1>Hello Electron!</h1>
  <p>这是你的第一个 Electron 应用。</p>
  <p>恭喜你，已经成功启动了 Electron 开发环境！</p>
</body>
</html>

1.7.3 运行应用

bash

npm start

1.7.4 预期效果

运行命令后，你将看到一个 Electron 应用窗口，显示 "Hello Electron!" 页面。这标志着你的第一个 Electron 应用成功运行。

1.7.5 代码解析

main.js：主进程文件，负责创建窗口和管理应用生命周期
- app 模块：控制应用的生命周期
- BrowserWindow 类：创建和控制浏览器窗口
- createWindow() 函数：创建并配置应用窗口
- 事件监听器：处理应用的各种事件（就绪、激活、关闭等）
index.html：渲染进程文件，负责显示应用界面
- 标准 HTML 结构
- 内联 CSS 样式
- 简单的页面内容

1.8 小结

通过本章的学习，你已经了解了 Electron 的基本概念、优势、应用场景以及如何创建你的第一个 Electron 应用。这为你后续的学习打下了基础。

在接下来的章节中，我们将深入学习 Electron 的开发环境搭建、核心架构、API 使用以及实战应用开发。

第1章：Electron 入门认知 ​

1.1 什么是Electron？ ​

1.2 为什么要学Electron？ ​

核心优势 ​

1.3 Electron 的应用场景 ​

1.3.1 桌面客户端 ​

1.3.2 工具软件 ​

1.3.3 跨平台应用 ​

1.3.4 经典案例 ​

1.4 Electron 与传统桌面开发的区别 ​

1.5 学习前提：必备技术基础回顾 ​

1.5.1 核心必备基础 ​

1.5.2 推荐学习资源 ​

1.6 学习路线规划 ​

1.6.1 新手学习重点 ​

1.6.2 学习阶段 ​

1.7 第一个Electron程序 ​

1.7.1 项目初始化 ​

1.7.2 创建核心文件 ​

1.7.3 运行应用 ​

1.7.4 预期效果 ​

1.7.5 代码解析 ​

1.8 小结 ​