Electron 开发桌面应用概述

Electron 是一个基于 Chromium 和 Node.js 的开源框架，允许开发者使用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用程序。Electron 的核心优势在于其跨平台兼容性（支持 Windows、macOS 和 Linux）以及前端技术的复用性。

环境搭建

安装 Node.js（建议使用 LTS 版本），并通过 npm 或 yarn 全局安装 Electron：

npm install -g electron

验证安装：

electron --version

项目初始化

创建项目目录并初始化：

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

安装 Electron 为开发依赖：

npm install electron --save-dev

基础项目结构

典型的 Electron 项目包含以下文件：

• main.js：主进程脚本（应用入口）。
• index.html：渲染进程的 UI。
• package.json：配置入口文件和其他元数据。

示例 package.json 配置：

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

主进程与渲染进程

1. 主进程（Main Process）

   • 负责管理应用生命周期（如窗口创建、退出）。
   • 通过 BrowserWindow 模块创建窗口。

2. 渲染进程（Renderer Process）

   • 每个窗口运行独立的渲染进程，展示 Web 页面。
   • 可通过 ipcRenderer 与主进程通信。

示例 main.js：

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');
});

开发调试

启动应用：

npm start

调试渲染进程：

• 使用 Chromium 开发者工具（默认快捷键 Ctrl+Shift+I 或 Cmd+Option+I）。
  调试主进程：
• 在启动命令中添加 --inspect 或 --inspect-brk：

electron --inspect=9229 .

打包与分发

使用工具如 electron-packager 或 electron-builder 生成可执行文件。

通过 electron-builder 打包：
安装：

npm install electron-builder --save-dev

配置 package.json：

{
  "build": {
    "appId": "com.example.myapp",
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    }
  }
}

运行打包：

npx electron-builder

性能优化建议

1. 避免在主进程执行耗时操作，使用 Worker 线程。
2. 启用原生模块（如 electron-vite 加速构建）。
3. 限制渲染进程的 Node.js 集成（安全性考虑）。

常见问题

1. 白屏问题：检查文件路径是否正确，或使用 webContents.on('did-fail-load') 捕获错误。
2. 跨域请求：在主进程中配置 webPreferences 的 webSecurity 选项。
3. 原生模块兼容性：确保模块与 Electron 的 Node.js 版本匹配。

通过以上步骤，可以快速搭建并发布一个 Electron 桌面应用。