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

于 2025-03-18 11:02:58 发布
阅读量2k 收藏 16
点赞数 31
文章标签： 前端 electron javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/idree/article/details/146335091
版权

目录标题

前言：为什么选择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', '响应数据')
})

架构要点总结：

  • 主进程是应用核心，管理所有窗口
  • 渲染进程通过预加载脚本安全通信
  • IPC通信需遵循"渲染进程->主进程->渲染进程"的闭环
  • 敏感操作必须通过主进程代理执行

二、核心机制详解：主进程与渲染进程

2.1 主进程开发实战

创建浏览器窗口：

// main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载本地文件
  mainWindow.loadFile('renderer/index.html')

  // 打开开发者工具
  mainWindow.webContents.openDevTools()
}

app.whenReady().then(createWindow)

2.2 渲染进程安全实践

预加载脚本示例：

// preload.js
const { contextBridge, ipcRenderer } = require('electron')

// 安全暴露API到渲染进程
contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile')
})

渲染进程调用：

// renderer/app.js
document.getElementById('file-btn').addEventListener('click', async () => {
  const filePath = await window.electronAPI.openFile()
  console.log('选择的文件:', filePath)
})

2.3 进程通信全解析

通信方式适用场景代码示例
ipcMain/ipcRenderer点对点通信ipcRenderer.send(‘event’)
remote模块直接调用主进程方法（已废弃）不推荐使用
contextBridge安全暴露API见2.2节示例
webContents.send主进程主动推送win.webContents.send(‘update’)

三、企业级开发实战

3.1 项目脚手架搭建

# 使用官方脚手架
npx @electron-forge/cli import

# 选择模板（这里选webpack）
? Which template would you like to use? webpack

# 启动开发模式
npm start

3.2 典型功能实现

  1. 系统通知：
// 在主进程中
const { Notification } = require('electron')

function showNotification(title, body) {
  new Notification({ title, body }).show()
}
  1. 菜单定制：
const { Menu } = require('electron')

const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '打开',
        accelerator: 'CmdOrCtrl+O',
        click: () => { /* 打开文件逻辑 */ }
      }
    ]
  }
]

Menu.setApplicationMenu(Menu.buildFromTemplate(template))
  1. 本地文件操作：
// 通过IPC实现
// 主进程
ipcMain.handle('readFile', async (event, path) => {
  return await fs.promises.readFile(path, 'utf-8')
})

// 渲染进程
const content = await window.electronAPI.readFile('/path/to/file.txt')

3.3调试技巧

主进程调试配置（.vscode/launch.json）：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "args": [".", "--remote-debugging-port=9222"]
    }
  ]
}

四、进阶开发指南

4.1 性能优化方案

优化方向具体措施效果预估
启动速度使用V8快照提升30%+
内存占用禁用不必要的nodeIntegration降低20%内存
渲染性能启用GPU加速动画更流畅
打包体积配置files白名单减少50%体积

启用硬件加速：

new BrowserWindow({
  webPreferences: {
    webgl: true,
    experimentalFeatures: true
  }
})

4.2 安全加固方案

// 安全配置示例
new BrowserWindow({
  webPreferences: {
    nodeIntegration: false,     // 禁用Node集成
    contextIsolation: true,     // 开启上下文隔离
    sandbox: true,              // 启用沙箱
    webSecurity: true,          // 启用Web安全策略
    allowRunningInsecureContent: false // 禁止不安全内容
  }
})

五、打包与分发

5.1 使用electron-builder

npm install electron-builder --save-dev

# 配置package.json
{
  "build": {
    "appId": "com.example.myapp",
    "productName": "我的应用",
    "directories": {
      "output": "release"
    },
    "files": ["dist/**/*"]
  },
  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  }
}

# 生成安装包
npm run dist

5.2 多平台构建

{
  "build": {
    "win": {
      "target": ["nsis", "portable"]
    },
    "mac": {
      "target": ["dmg", "zip"]
    },
    "linux": {
      "target": ["AppImage", "deb"]
    }
  }
}

六、常见问题排雷

6.1 典型报错处理

问题：require未定义
✅ 解决方案：

  1. 检查是否开启contextIsolation
  2. 确认通过preload脚本暴露必要API

问题：白屏无内容
✅ 排查步骤：

  1. 检查loadURL/file路径是否正确
  2. 查看控制台日志（主进程启动时添加-enable-logging参数）

6.2 资源加载优化

// 使用协议拦截
protocol.registerFileProtocol('app', (request, callback) => {
  const url = request.url.substr(6)
  callback({ path: path.normalize(`${__dirname}/${url}`) })
})

// 在HTML中使用
<img src="app://assets/logo.png">

七、项目实战：开发一个Markdown编辑器

7.1 项目初始化与工程化配置

# 创建项目（使用Electron Forge脚手架）
npx create-electron-app markdown-editor --template=webpack
cd markdown-editor

# 安装依赖库
npm install marked highlight.js showdown fs-extra

# 目录结构升级
src/
├── main          # 主进程代码
│   ├── index.js
│   └── fileManager.js
├── renderer      # 渲染进程代码
│   ├── assets
│   ├── css
│   ├── js
│   └── index.html
└── preload       # 预加载脚本

7.2 核心功能模块设计

// 功能架构图（代码实现版）
const featureMap = {
  editor: {            // 编辑器模块
    realtimePreview: true,
    syntaxHighlight: true
  },
  file: {             // 文件管理
    autoSave: true,
    historyVersion: 5
  },
  export: {           // 导出功能
    pdf: true,
    html: true
  },
  system: {           // 系统集成
    tray: true,
    shortcut: true
  }
}

7.3 核心功能实现

  1. 双栏实时预览（核心代码）
// 渲染进程 - 编辑器组件
class MarkdownEditor {
  constructor() {
    this.editor = document.getElementById('editor')
    this.preview = document.getElementById('preview')
    
    // 实时监听输入
    this.editor.addEventListener('input', this.debounce(this.updatePreview, 300))
  }

  // 防抖函数
  debounce(fn, delay) {
    let timer
    return (...args) => {
      clearTimeout(timer)
      timer = setTimeout(() => fn.apply(this, args), delay)
    }
  }

  // 更新预览
  async updatePreview() {
    const content = this.editor.value
    const html = await window.electronAPI.parseMarkdown(content)
    this.preview.innerHTML = html
    hljs.highlightAll() // 代码高亮
  }
}
  1. 文件管理系统（主进程）
// main/fileManager.js
const { ipcMain, dialog } = require('electron')
const fs = require('fs-extra')
const path = require('path')

class FileManager {
  constructor() {
    this.currentFile = null
    this.initIPC()
  }

  initIPC() {
    // 打开文件
    ipcMain.handle('file:open', async () => {
      const { filePaths } = await dialog.showOpenDialog({
        properties: ['openFile'],
        filters: [{ name: 'Markdown', extensions: ['md'] }]
      })
      if (!filePaths) return null
      
      this.currentFile = filePaths[0]
      return fs.readFile(this.currentFile, 'utf8')
    })

    // 保存文件
    ipcMain.handle('file:save', async (_, content) => {
      if (!this.currentFile) {
        const { filePath } = await dialog.showSaveDialog({
          defaultPath: 'untitled.md'
        })
        if (!filePath) return false
        this.currentFile = filePath
      }
      
      await fs.writeFile(this.currentFile, content)
      return true
    })
  }
}
  1. 原生菜单集成
// main/menu.js
const { Menu, shell } = require('electron')

module.exports = function createMenu() {
  const template = [
    {
      label: '文件',
      submenu: [
        {
          label: '打开',
          accelerator: 'CmdOrCtrl+O',
          click: (_, browserWindow) => {
            browserWindow.webContents.send('menu:open-file')
          }
        },
        { type: 'separator' },
        {
          label: '导出为PDF',
          click: (_, browserWindow) => {
            browserWindow.webContents.send('menu:export-pdf')
          }
        }
      ]
    },
    {
      label: '开发',
      submenu: [
        { role: 'reload' },
        { role: 'toggleDevTools' }
      ]
    }
  ]
  
  Menu.setApplicationMenu(Menu.buildFromTemplate(template))
}

7.4 工程化增强

  1. 自动更新配置（main/updater.js）
const { autoUpdater } = require('electron-updater')

module.exports = function checkUpdates() {
  autoUpdater.autoDownload = true
  autoUpdater.autoInstallOnAppQuit = true

  autoUpdater.on('update-available', () => {
    mainWindow.webContents.send('update:available')
  })

  autoUpdater.on('update-downloaded', () => {
    mainWindow.webContents.send('update:downloaded')
  })

  autoUpdater.checkForUpdates()
}
  1. 打包配置优化（forge.config.js）
module.exports = {
  packagerConfig: {
    icon: './src/renderer/assets/icon',
    extraResource: ['LICENSE']
  },
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        name: 'markdown_editor'
      }
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin']
    }
  ]
}

7.5 项目效果演示

功能演示代码：

// 主窗口启动逻辑
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1400,
    height: 900,
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js')
    }
  })

  // 加载React应用（基于webpack）
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY)

  // 初始化核心模块
  new FileManager()
  createMenu()
  checkUpdates()
}

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕

在这里插入图片描述

Electron 开发桌面应用：从入门到发布跨平台应用
数字魔方操控师的博客
05-05 965
一、引言在数字化时代，桌面应用程序依然在企业办公、创意设计、多媒体处理等领域发挥着重要作用。然而，传统桌面应用开发面临着平台差异带来的诸多挑战，如针对 Windows、macOS、Linux 等不同操作系统，需要使用不同的技术栈分别进行开发，这无疑增加了开发成本和周期。Electron 的出现为开发者带来了全新的解决方案，它基于 Web 技术，允许开发者使用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用，极大地降低了开发门槛和成本，提高了开发效率。
2025最新Electron环境搭建，第一个Electron应用【详细教程】
Zy100Papa的博客
02-10 2457
cnpm是个中国版的npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。安装好electron后，目录下自动生成node_modules目录，里面存放到electron所用到模块。由于国内网速问题，直接安装一般会失败。淘宝镜像是淘宝团队为国内用户提供的npm镜像源，它与官方镜像源保持同步，并提供了更快的下载速度。在使用npm初始化项目前，强烈建议将npm源更改到国内镜像源。
前端开发基于Vue3、Vite、Less和Electron的桌面应用开发实践：从项目初始化到页面路由配置
05-08
内容概要：本文档提供了基于 Vue3、Vite、Less 和 Electron 的前端项目实践指南，以“登录页+商品列表页”为例，详细介绍了从项目初始化到最终打包发布的全过程。首先通过 npm 命令创建并配置项目，接着定义了项目的目录结构，包括公共资源、组件、视图等文件夹。Electron 配置方面，通过 main.js 文件设置应用窗口属性及加载 URL。样式部分采用 Less 编写全局样式文件，确保页面美观统一。组件开发中，分别实现了登录页和商品列表页的功能，前者用于用户身份验证，后者展示商品信息。最后通过 Vue Router 实现页面路由管理，并给出开发与打包的具体命令。; 适合人群：有一定前端开发经验的个人开发者或小型团队，特别是对 Vue3 和 Electron 感兴趣的开发者。; 使用场景及目标：①希望快速搭建一个集成了现代前端技术和桌面应用开发的项目；②了解如何将 Web 技术栈应用于桌面应用程序的开发；③掌握 Vue3 组件化开发、Vite 构建工具、Less 样式预处理以及 Electron 封装桌面应用的方法。; 阅读建议：读者应按照文档步骤依次操作，在实践中加深理解。建议先熟悉各技术的基本概念，再逐步完成项目搭建、组件开发、样式设计和路由配置等内容。同时，可根据实际需求扩展更多功能，如状态管理、进程间通信等。
【桌面程序】Electron实现跨平台桌面应用程序
Hi-Jimmy
01-16 1379
Electron 是一个开源框架，用于构建跨平台的桌面应用程序，允许开发者使用网页技术（HTML、CSS 和 JavaScript）来开发桌面应用程序。它结合了 Chromium（用于渲染网页的浏览器引擎）和 Node.js（用于处理后台逻辑的 JavaScript 运行时环境），因此开发者可以使用前端技术来构建用户界面，并且利用 Node.js 来访问操作系统功能。
一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron
weixin_41978174的博客
08-25 1908
1.后面有的bug可能与Electron Forge配置有关。有时间试试，找个解决方案。2.也有可能与main.js写法有关。3.打包时删除main.js里的win.openDevTools() //自动打开调试窗口否则软件会自动打开调试窗口。4. 代码仓库位置终于完成，虽然有bug,但能运行起来了。后续找个更好的解决方案。
探索 Electron：将 Web 技术带入桌面应用
ztK63LrD的博客
06-29 4124
Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。
如何用Web前端技术就能开发出桌面应用程序？
dirft_din的博客
09-02 1775
Web前端技术开发桌面应用的方式 CEF：用 Chromium&Webkit 来呈现 web 页面，是客户端里面嵌浏览器，浏览器里面跑网页。 heX：基于CEF，内部整合了开源项目 Chromium 及 node.js。 nw：基于Chromium 和 node.js，利用 web 方式开发跨平台桌面应用的平台技术。 electron：底层也是基于Chromium 和 node.js。 等等。。。 案例实操~electron electron 是 github 开发的，用来开发桌面应用的一款前端
【Electron】桌面应用开发
我的博客
10-03 2909
Electron是一个使用JavaScript，HTML和CSS构建桌面应用程序的框架。通过将和嵌入到其二进制文件中，Electron允许您维护一个JavaScript代码库，并创建可在Windows，macOS和Linux上运行的跨平台应用程序 - 无需本机开发经验。
Electron桌面应用开发
woyebuzhidao321的博客
11-05 4447
https://www.electronjs.org/ 有的时候 样式更新不过来 ctrl + r 调试面板 ctrl + shift + i 一、Electron技术架构 Electron集成了chromium与node.js,将他们整合到一个运行环境中，允许我们使用web技术 html、css、js来构建桌面应用程序，并且能过通过一些与操作系统无关的api 访问windows\macos Chromium：可以理解为浏览器，支持最新特性的浏览器,es6、 Node.js：javascript 运行时
Electron----桌面应用开发框架
weixin_41978174的博客
07-22 7328
Electron 是一个开源框架，旨在使用 Web 技术（如 HTML、CSS 和 JavaScript）开发跨平台的桌面应用。它结合了 Chromium 和 Node.js，使开发者能够构建具有原生应用体验的桌面应用程序，同时使用熟悉的 Web 开发工具和技术。它的灵活性、强大的功能和良好的社区支持使得它成为构建现代桌面应用的热门选择。：负责管理应用的生命周期、创建和管理窗口以及处理系统级别的 API 请求。：提供了简化的工具链来创建、开发、打包和发布 Electron 应用。类来创建和管理应用窗口。
electron入门教程
wang993828743的博客
05-27 8146
一、安装配置 1、为你的应用创建一个新的空文件夹 Electron 2、打开你的命令行工具，然后从该文件夹运行 npm init 会帮助你创建一个基本的 package.json 文件 3、安装electron npm install --save-dev electron 4、项目根目录新建main.js文件（入口文件） const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器
electron 中文教程
05-01
常见问题 Introduction 1.1 Electron 常见问题 1.2 向导 支持平台 2.1 分发应用 2.2 提交应用到 Mac App Store 2.3 打包应用 2.4 使用 Node 原生模块 2.5 主进程调试 2.6 使用 Selenium 和 WebDriver 2.7 使用开发人员工具扩展 2.8 使用 Pepper Flash 插件 2.9 使用 Widevine CDM 插件 2.10 教程 快速入门 3.1 桌面环境集成 3.2 在线/离线事件探测 3.3 API文档 简介 4.1 进程对象 4.2 支持的 Chrome 命令行开关 4.3 环境变量 4.4 自定义的 DOM 元素: File 对象 5.1 webview 标签 5.2 window.open 函数 5.3 在主进程内可用的模块: app 6.1 autoUpdater
【桌面应用开发】Electron框架快速入门指南：跨平台应用开发全流程详解
最新发布
05-17
此外，还涵盖了从搭建工程、加载本地页面、完善窗口行为、配置自动重启，到使用Preload脚本和实现进程间通信的具体步骤。最后，介绍了如何使用electron-builder进行应用打包，以及electron-vite这一新型构建工具的...
前端Electron新手入门教程详解
01-02
Electron是一个能让你使用传统前端技术（Nodejs, Javascript, HTML, CSS）开发一个跨平台桌面应用的框架。这里所说的桌面应用指的是在Windows、OSX及Linux系统上运行的程序。 历史 2013年的时候，Atom编辑器问世，...
新手入门：使用JavaScript和Electron打造前端桌面应用
从了解Electron框架的基本原理和概念，到掌握JavaScript和CSS在Electron中的应用，再到遵循最佳实践和开发流程，最终通过注释丰富的代码和视频教程学习，新手开发者可以一步步构建出自己的桌面应用程序。
electron 应用开发优秀实践
vivo互联网技术
08-09 2147
electron 具有跨端、基于 Web 、超强生态等优点，是桌面端开发的优秀方案之一。
Electron桌面应用开发：创建应用
m0_73500130的博客
03-05 1838
Electron是一个由 GitHub 开发并开源的框架，允许开发者使用构建跨平台的桌面应用程序。它结合了和Node.js，使得开发者可以轻松地将 Web 应用程序转换为原生桌面应用。Electron支持 Windows、macOS 和 Linux 三大主流操作系统，开发者只需编写一次代码即可在多个平台上运行，同时可以直接复用现有的前端技术栈和工具链（如React,Vue,Angular等），轻松集成各种npm包，它还内置，开发者可以直接调试界面和逻辑，提高开发效率。
Electron从入门到精通
热门推荐
家有喜娟儿的博客
03-22 1万+
一,Electron 快速入门 1、简介 Electron是利用web前端技术进行桌面应用开发的一套框架。它可以让你使用纯JavaScript调用丰富的原生API来创造桌面应用。 若想开发一个兼容多平台的桌面应用，以往常用的技术框架有GTK、QT等，这些框架受语言限制，且学习成本较高，效率有限。目前一些基于前端技术的hybrid框架很流行，且已经在多个领域得到了广泛的应用和验证，比如利用前端技术+相应的打包工具可开发适配多平台的应用（PC、微信公众号、小程序、Andro...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值