C25. 初识 Electron

5.1. ⭐ Electron 通过将 Chromium 内核打包兼容各种环境

Electron 将 Chromium 浏览器内核与 Node.js 合并，使开发者能用 Web 技术开发跨平台桌面应用。

🌍 跨平台实现原理：

核心组件：

• Chromium：提供网页渲染能力（兼容 Windows/macOS/Linux 的 UI 样式）。
• Node.js：调用底层系统 API（如文件操作、网络请求）。
• Electron API：封装跨平台功能（如系统托盘、文件对话框）。

📦 兼容性保障：

• 预编译二进制文件：Electron 官方提供不同平台的预编译包（如 x86/x64 架构）。
• 环境适配：
  • Windows 7+、macOS 10.12+、Linux主流发行版均支持。
  • 需注意旧版本系统（如 Win7）需选择兼容的 Electron 版本（参考知识库[5]）。

WARNING

• 性能问题：Electron 应用体积较大（约 100MB 起），需通过压缩工具优化。
• 安全风险：默认开放的渲染进程可能面临 XSS 攻击，需启用上下文隔离（见 5.5 节）。

5.2. 🌟 使用 npm 创建 Electron 项目

通过模板工具快速搭建基础项目结构，避免手动配置。

🚀 快速创建步骤：

1. 安装模板工具：

   npm install -g electron-forge    # 推荐使用 electron-forge 初始化

2. 创建项目：

   electron-forge init my-electron-app    # 选择模板（如 Vue/React 空项目）

3. 启动应用：

   cd my-electron-app
   npm start

📦 基础项目结构（以 electron-forge 为例）：

my-electron-app/
├── src/                # 源代码目录
│   ├── main.js         # 主进程入口文件
│   └── index.html      # 渲染进程初始页面
├── package.json        # 项目配置
├── electron/           # Electron 特定配置目录
│   └── forge.config.js # 打包配置
└── ...                 # 其他依赖文件

TIP

• 主进程（main.js）控制应用生命周期和原生功能。
• 渲染进程（网页文件）负责 UI 渲染，通过 ipcRenderer 与主进程通信。

5.3. ⭐ Electron 文件结构

典型项目结构需包含主进程、渲染进程和配置文件。

📁 标准文件结构示例

my-project/
├── public/             # 静态资源（图片、HTML）
│   └── index.html      # 初始窗口页面
├── src/                # 源代码
│   ├── main.js         # 主进程逻辑
│   └── preload.js      # 预加载脚本（可选）
├── package.json        # 依赖和脚本配置
├── electron-builder.json # 打包配置（如图标、发布目录）
└── ...                 # 第三方库和工具

📄 关键文件说明

文件名	作用描述	示例内容片段
main.js	主进程逻辑（创建窗口、监听事件）	javascript<br>const { app, BrowserWindow } = require('electron');
index.html	渲染进程初始页面	html<br><h1>欢迎使用Electron</h1>
package.json	声明依赖和脚本（如启动命令）	json<br>"main": "src/main.js"

5.4. 🌟 Electron 项目打包

通过 electron-builder 或 electron-packager 将代码编译为可执行文件。

📦 打包流程（以 electron-builder 为例）：

1. 安装依赖：

   npm install --save-dev electron-builder

2. 配置打包选项： 在 package.json 中添加：

   {
     "build": {
       "appId": "com.example.myapp",
       "directories": {
         "output": "dist"
       },
       "win": {
         "target": "nsis"       # Windows 安装包
       },
       "mac": {
         "target": "dmg"       # macOS 包
       }
     }
   }

3. 执行打包命令：

   npm run build    # 默认执行 "build": "electron-builder"

WARNING

• 版本兼容性：确保 electron-builder 版本与 Electron 一致（参考知识库[5]中的 package.json 配置）。
• Windows 7 兼容：需指定 Electron 版本 ≤12.x（如 "electron": "12.2.3"）。

5.5. ⭐ 上下文隔离与进程间通讯

Electron 的安全机制与进程通信是构建复杂应用的关键。

🔒 上下文隔离（Context Isolation）

• 作用：隔离渲染进程的 DOM 和 Node.js 环境，防止恶意代码操作 Node API。
• 启用方法：在创建窗口时设置：

  // 主进程 main.js
  const win = new BrowserWindow({
    webPreferences: {
      contextIsolation: true,    // 启用隔离
      preload: path.join(__dirname, 'preload.js') // 预加载脚本
    }
  });

📡 进程间通信（IPC）

• 主进程（main.js）监听事件：

  const { ipcMain } = require('electron');
  ipcMain.on('message-from-renderer', (event, arg) => {
    console.log('Received:', arg);
    event.reply('message-reply', 'Hello from main!');
  });

• 渲染进程（renderer.js）发送事件：

  const { ipcRenderer } = require('electron');
  ipcRenderer.send('message-from-renderer', 'Hello from renderer!');
  ipcRenderer.on('message-reply', (event, arg) => {
    console.log(arg);
  });

WARNING

• 安全建议：
  • 预加载脚本（preload.js）应避免直接暴露 Node.js API。
  • 通过 contextBridge 限制渲染进程可访问的 API。

知识回顾

1. 核心原理： Electron 通过 Chromium 渲染界面，Node.js 调用系统 API，实现跨平台兼容。
2. 项目创建： 使用 electron-forge 快速初始化，包含主进程、渲染进程和配置文件。
3. 打包配置：
   • 通过 electron-builder 定制输出格式（如 .exe、.dmg）。
   • 兼容旧系统需指定兼容的 Electron 版本。
4. 安全机制：
   • 上下文隔离：防止渲染进程直接访问 Node API。
   • IPC：通过 ipcMain 和 ipcRenderer 实现进程间安全通信。

课后练习

1. （单选）以下哪个工具用于快速创建 Electron 项目？

   • A. npm init
   • B. electron-forge
   • C. electron-packager
   • D. webpack

2. （填空）在 Electron 中，控制应用生命周期的进程是 ______ 进程。

3. （操作题）尝试完成以下步骤：

   1. 使用 electron-forge 创建一个空项目。
   2. 在渲染进程中通过 IPC 向主进程发送一条消息，并接收回复。
   3. 打包项目为 Windows 可执行文件。

4. （思考题）为什么启用上下文隔离能提升 Electron 应用的安全性？

5. （实践题）将你的 Electron 应用打包为 macOS 和 Windows 版本，并验证在目标系统上的兼容性。