🎬 HoRain云小助手：个人主页

 🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

---

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

目录

⛳️ 推荐

专栏介绍

🔧 核心 API 速查表

🚀 生产级项目配置模板

主进程 (main.js) 核心配置

安全的预加载脚本 (preload.js) 模板

🔄 进程间通信 (IPC) 模式详解

💡 进阶模块与实用技巧

---

Electron 的魅力在于让开发者能使用 Web 技术构建功能强大的桌面应用。下面这份速查手册和配置模板，希望能帮你快速上手并规避常见陷阱。

🔧 核心 API 速查表

下表汇总了 Electron 开发中最常用的核心 API 及其用途 。

模块	关键 API / 类	主要用途与场景	备注
应用生命周期​	app	控制应用启动、退出等核心事件 。	应用的基石
	app.whenReady()	应用初始化完成，通常在此创建窗口 。	替代旧的 ready事件监听
	app.on('window-all-closed')	监听所有窗口关闭事件，实现跨平台退出逻辑 。	macOS 通常不退出应用
	app.quit()	退出应用 。
窗口管理​	BrowserWindow	创建和控制应用窗口 。	核心中的核心
	win.loadURL()/ win.loadFile()	为窗口加载网页内容（远程或本地）。
	win.webContents.openDevTools()	打开开发者工具，用于调试 。
进程通信​	ipcMain	在主进程中处理来自渲染进程的请求 。	应用逻辑的桥梁
	ipcRenderer	在渲染进程中向主进程发送消息 。
	contextBridge	在预加载脚本中安全地暴露 API 给渲染进程 。	安全关键​
系统交互​	dialog	显示系统原生对话框（打开/保存文件、消息提示）。	提升原生体验
	shell	使用默认程序打开外部链接、文件或文件夹 。
	Tray	创建系统托盘图标 。
	Menu	设置应用菜单和上下文菜单 。
系统集成​	clipboard	读写系统剪贴板 。	增强交互能力
	Notification	显示系统原生通知 。
	powerMonitor	监听系统电源状态（如休眠/唤醒）。
	net/ net.fetch	在主进程发起网络请求（支持系统代理）。

🚀 生产级项目配置模板

以下是一个融合了现代 Electron 最佳实践（特别是安全性）的主进程和预加载脚本配置模板，基于 Electron 33 。

主进程 (main.js) 核心配置

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    minWidth: 800,
    minHeight: 600,
    show: false, // 先隐藏，防止初始白屏
    icon: path.join(__dirname, 'build/icon.ico'), // 跨平台图标
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 【必须】指定预加载脚本
      contextIsolation: true, // 【必须】启用上下文隔离
      nodeIntegration: false, // 【必须】禁用 Node.js 集成
      sandbox: true, // 【推荐】启用渲染进程沙盒
      webSecurity: true, // 【必须】启用 Web 安全策略
    },
    backgroundColor: '#fff', // 与前端首屏背景色一致
  });

  // 根据环境加载内容
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:5173');
    mainWindow.webContents.openDevTools({ mode: 'detach' });
  } else {
    mainWindow.loadFile('dist/index.html');
  }

  // 窗口准备就绪后再显示，提升用户体验
  mainWindow.once('ready-to-show', () => {
    mainWindow.show();
  });

  // 安全地处理新窗口及外部链接
  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
    shell.openExternal(url);
    return { action: 'deny' };
  });

  // 阻止导航到非安全来源
  mainWindow.webContents.on('will-navigate', (event, navigationUrl) => {
    if (!navigationUrl.startsWith('file:') && !navigationUrl.includes('localhost')) {
      event.preventDefault();
      shell.openExternal(navigationUrl);
    }
  });
}

app.whenReady().then(createWindow);

// 跨平台窗口管理
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

安全的预加载脚本 (preload.js) 模板

const { contextBridge, ipcRenderer } = require('electron');

// 定义允许渲染进程使用的 API 白名单
const validInvokeChannels = ['get-data', 'save-file', 'open-dialog'];
const validOnChannels = ['update-available', 'download-progress'];

// 通过 contextBridge 安全地暴露 API 到渲染进程的全局对象上
contextBridge.exposeInMainWorld('electronAPI', {
  // 用于调用主进程方法并获取结果（推荐）
  invoke: (channel, ...args) => {
    if (validInvokeChannels.includes(channel)) {
      return ipcRenderer.invoke(channel, ...args);
    }
    throw new Error(`Invalid IPC channel: ${channel}`);
  },
  // 用于监听主进程发送的消息
  on: (channel, listener) => {
    if (validOnChannels.includes(channel)) {
      ipcRenderer.on(channel, listener);
    }
  },
  // 清理监听器
  removeAllListeners: (channel) => {
    ipcRenderer.removeAllListeners(channel);
  },
});

🔄 进程间通信 (IPC) 模式详解

掌握了 API 和配置，我们来深入看看连接主进程和渲染进程的几种核心通信模式 。

1. 渲染进程 → 主进程（单向）

   适用于通知主进程执行某个操作，无需等待结果。

   • 渲染进程：通过预加载脚本暴露的 send方法发送消息。

   • 主进程：使用 ipcMain.on监听消息。

2. 渲染进程 → 主进程（双向）

   最常用模式，调用主进程功能并等待返回值。

   • 渲染进程：使用预加载脚本暴露的 invoke方法。

   • 主进程：使用 ipcMain.handle处理请求并返回结果（支持 Promise）。

3. 主进程 → 渲染进程

   用于主进程主动向渲染进程推送消息（如菜单点击、状态更新）。

   • 主进程：使用 win.webContents.send()向特定窗口发送消息。

   • 渲染进程：通过预加载脚本暴露的 on方法监听。

💡 进阶模块与实用技巧

• 自动更新：使用 electron-updater库可以大大简化应用自动更新的流程 。

• 崩溃报告：集成 crashReporter模块，收集应用崩溃信息以帮助调试 。

• 性能监控：利用 process.getProcessMemoryInfo()等 API 监控应用性能 。

希望这份指南能成为你 Electron 开发路上的得力助手！如果你在实现某个具体功能时遇到挑战，我很乐意和你一起探讨更深入的解决方案。

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙