HoRain云--Electron开发速查手册与配置模板-开发者社区

🎬 HoRain云小助手：个人主页

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

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

⛳️ 推荐

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

专栏介绍

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

安全的预加载脚本 (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); }, });