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"}
}
主进程与渲染进程
-
主进程（Main Process）
- 负责管理应用生命周期（如窗口创建、退出）。
- 通过
BrowserWindow模块创建窗口。
-
渲染进程（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
性能优化建议
- 避免在主进程执行耗时操作，使用 Worker 线程。
- 启用原生模块（如
electron-vite加速构建）。 - 限制渲染进程的 Node.js 集成（安全性考虑）。
常见问题
- 白屏问题：检查文件路径是否正确，或使用
webContents.on('did-fail-load')捕获错误。 - 跨域请求：在主进程中配置
webPreferences的webSecurity选项。 - 原生模块兼容性：确保模块与 Electron 的 Node.js 版本匹配。
通过以上步骤，可以快速搭建并发布一个 Electron 桌面应用。