Electron从入门到精通：手把手教你用前端技术打造桌面级应用（万字长文）

最新推荐文章于 2026-05-11 18:10:34 发布

原创

最新推荐文章于 2026-05-11 18:10:34 发布 · 3.4k 阅读

标签

#前端 #electron #javascript

目录标题

前言：为什么选择Electron？
一、Electron基础篇：环境搭建与核心概念
二、核心机制详解：主进程与渲染进程
三、企业级开发实战
四、进阶开发指南
- 4.1 性能优化方案
- 4.2 安全加固方案
五、打包与分发
- 5.1 使用electron-builder
- 5.2 多平台构建
六、常见问题排雷
- 6.1 典型报错处理
- 6.2 资源加载优化
七、项目实战：开发一个Markdown编辑器

前言：为什么选择Electron？

作为前端开发者，你可能遇到过这些场景：

需要将Web应用打包成桌面客户端
要求访问本地文件系统或硬件设备
希望实现多窗口复杂交互
需要离线运行且保持原生应用体验

Electron 完美解决了这些问题！使用HTML/CSS/JavaScript即可构建跨平台桌面应用，VSCode、Slack等知名应用均基于Electron开发。本文将带你从零开始，系统掌握Electron开发全流程。

一、Electron基础篇：环境搭建与核心概念

1.1 开发环境准备

# 创建项目（建议Node.js版本≥16.x）
mkdir my-electron-app && cd my-electron-app
npm init -y

# 安装Electron（国内用户推荐使用镜像）
npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/
npm install electron --save-dev

# 验证安装
npx electron -v

1.2 项目结构解析（关键文件详解）

# 典型项目结构（注释版）
my-electron-app/
├── package.json     # 项目配置文件
├── main.js          # 主进程入口（核心逻辑）
├── preload.js       # 预加载脚本（安全桥梁）
├── renderer/        # 渲染进程资源
│   ├── index.html   # 窗口主页面
│   ├── main.css     # 样式文件
│   └── app.js       # 渲染进程脚本
└── assets/          # 静态资源目录
│   ├── icons/       # 应用图标
│   └── fonts/       # 字体文件

关键文件说明：

// main.js（主进程核心）
const {
   
    app, BrowserWindow } = require('electron')
const path = require('path')

// 创建窗口函数
function createWindow() {
   
   
  const win = new BrowserWindow({
   
   
    webPreferences: {
   
   
      preload: path.join(__dirname, 'preload.js') // 指定预加载脚本
    }
  })
  
  // 加载本地页面（开发环境可改为 loadURL）
  win.loadFile('renderer/index.html')
}

// 应用启动回调
app.whenReady().then(createWindow)

<!-- renderer/index.html（渲染进程示例） -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron App</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <h1>Hello Electron!</h1>
  <script src="app.js"></script>
</body>
</html>

1.3 核心概念解析（文字版架构说明）

Electron双进程模型：

主进程（Main Process）
- 使用Node.js环境
- 通过BrowserWindow创建窗口
- 访问系统API（文件系统、菜单等）
- 典型入口文件：main.js
渲染进程（Renderer Process）
- 每个窗口对应一个渲染进程
- 运行在Chromium环境中
- 默认无法直接访问Node.js
- 通过预加载脚本安全通信

进程通信流程示例：

// preload.js（安全通信桥梁）
const {
   
    contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
   
   
  send: (channel, data) => ipcRenderer.send(channel, data),
  receive: (channel, func) => {
   
   
    ipcRenderer.on(channel, (event, ...args) => func(...args))
  }
})

// 渲染进程调用
window.electronAPI.receive('update', (data) => {
   
   
  console.log('收到主进程消息:', data)
})

// 主进程监听
ipcMain.on('request', (event, data) => {
   
   
  event.sender.send('update', '响应数据')
})