Electron桌面应用开发教学

20XX/XX/XXElectron桌面应用开发教学汇报人:XXXCONTENTS目录01

课程导学与Electron简介02

开发环境准备03

Electron核心基础架构04

Electron项目开发流程CONTENTS目录05

典型桌面应用场景开发06

项目打包与分发07

课程总结与学习建议课程导学与Electron简介01掌握Electron核心开发能力熟练运用Electron的主进程、渲染进程通信机制，能独立开发基础桌面应用。掌握跨平台适配技巧学会针对Windows、macOS、Linux系统做应用适配，打造兼容多系统的桌面程序。具备项目实战落地能力能完成从需求分析到打包发布的完整流程，独立产出类似VSCode轻量版的桌面应用。课程学习目标Electron应用场景介绍跨平台办公软件开发微软Teams依托Electron开发，实现Windows、Mac、Linux多系统适配，满足远程协作需求。创意设计工具打造Figma桌面端基于Electron构建，支持设计师在不同系统上完成UI设计与协作交付。开源代码编辑器开发VisualStudioCode借助Electron框架，实现全平台兼容，成为全球开发者青睐的编程工具。为什么选择Electron跨平台开发优势显著开发者仅需一套代码，就能同时打造Windows、MacOS、Linux系统的桌面应用，如VSCode便是典型案例。前端技术栈即可上手无需学习全新桌面开发语言，使用HTML、CSS、JavaScript就能开发，降低开发者学习成本。丰富的生态与社区支持拥有海量第三方插件与活跃社区，遇到问题能快速找到解决方案，加速项目开发进程。开发环境准备02Node.js与npm安装配置Node.js版本选择与下载建议选择LTS长期支持版，可前往Node.js官网下载适配Windows、Mac等系统的安装包。Node.js安装与环境变量配置双击安装包按指引完成安装，手动配置系统环境变量，确保终端可全局调用node命令。npm初始配置与源切换安装完成后验证npm版本，可切换至淘宝镜像源，提升后续依赖包的下载速度。VSCode编辑器选型与基础配置VSCode是Electron开发热门选择，可安装Electron插件，配置代码高亮、智能提示功能提升开发效率。WebStorm编辑器选型与专属配置WebJetBrains旗下的WebStorm适配Electron，可配置Electron调试工具、代码自动格式化功能。SublimeText编辑器选型与扩展配置轻量型SublimeText支持Electron开发，可安装PackageControl扩展，配置代码片段快速生成模板。代码编辑器选型与配置Electron核心基础架构03进程模型基本概念

主进程（MainProcess）定义主进程是Electron应用的核心控制进程，负责管理窗口、系统事件与原生API调用，好比应用的"大脑"。

渲染进程（RendererProcess）作用渲染进程负责加载和展示Web页面，每个窗口对应一个独立渲染进程，典型如VSCode的编辑器窗口进程。

进程间通信（IPC）机制主进程与渲染进程通过IPC传递数据，可借助ipcMain和ipcRenderer模块实现跨进程的指令与信息交互。管理应用窗口生命周期主进程可创建、销毁、最大化或最小化窗口，像VSCode的窗口启动与关闭均由其管控。控制应用系统权限访问主进程负责调用系统API，如获取文件读写权限，Electron开发的网盘应用依赖它实现文件操作。管控全局应用状态主进程维护应用全局状态，如用户登录状态，跨窗口同步状态信息保障数据一致性。主进程的核心作用渲染进程的核心作用页面渲染与交互呈现负责将HTML、CSS和JavaScript转化为可视化界面，像VSCode的编辑器界面便由其渲染实现。独立沙箱环境保障运行在独立沙箱中，隔离主进程与系统资源，避免单个页面崩溃影响整个应用运行。WebAPI支持与扩展支持Chrome的全部WebAPI，还可通过ElectronAPI扩展能力，比如实现本地文件读取功能。进程间通信机制

主进程与渲染进程的IPC通信主进程通过ipcMain、渲染进程通过ipcRenderer实现双向通信，如VSCode用此实现界面与底层功能交互。

远程模块(Remote)的使用旧版Electron可通过remote模块让渲染进程直接调用主进程API，如早期Atom编辑器的菜单功能实现。

上下文隔离与预加载脚本通信通过预加载脚本在上下文隔离环境下暴露API，如Figma桌面端安全实现渲染进程与主进程交互。核心API分类与调用逻辑01主进程专属API分类及调用主进程API如app、BrowserWindow仅能在主进程调用，比如通过app.on('ready')初始化应用窗口。02渲染进程专属API分类及调用渲染进程可调用webFrame、desktopCapturer等API，例如用desktopCapturer实现屏幕截图功能。03跨进程通用API分类及调用ipcMain与ipcRenderer属于跨进程API，可实现主、渲染进程间的消息通信与数据交互。Electron项目开发流程04项目初始化搭建安装Node.js与npm环境首先需安装Node.js及配套npm，这是Electron项目运行的基础环境，可从Node.js官网下载适配版本。创建项目目录与package.json文件通过mkdir命令新建项目文件夹，再用npminit指令生成package.json，配置项目基础信息与依赖项。安装Electron核心依赖在项目终端执行npminstallelectron--save-dev命令，将Electron安装为开发依赖，完成核心环境搭建。入口文件配置

主进程入口文件指定在package.json中配置main字段，如设置为"main":"./main.js"，明确Electron主进程的启动入口。

渲染进程页面关联通过主进程的BrowserWindow加载html文件，例如win.loadFile('./index.html')，关联渲染进程页面。

窗口基础参数配置在main.js中设置窗口尺寸、是否可缩放等参数，如width:800,height:600，定义初始窗口形态。窗口创建与管理

基础窗口初始化创建通过Electron的BrowserWindow类，编写代码创建基础窗口，可设置尺寸、标题等基础属性。

窗口多状态管理实现实现窗口最小化、最大化、关闭等状态控制，参考VSCodeElectron版的窗口交互逻辑优化操作体验。

多窗口联动配置配置主窗口与子窗口的通信规则，如微信桌面版中聊天窗口与设置窗口的联动交互。应用生命周期控制

应用初始化配置在Electron项目启动时，需通过app模块的ready事件加载窗口、设置菜单等基础配置，VSCode开发即遵循此逻辑。

应用窗口管理监听窗口的close、minimize等事件，可实现窗口状态控制，如微信Electron版支持最小化到系统托盘功能。

应用退出处理通过app模块的before-quit事件执行数据保存、资源释放操作，避免进程异常退出，如飞书Electron端的退出校验。本地调试与热重载配置

主进程调试端口配置在package.json中配置启动命令，指定--inspect端口，可通过ChromeDevTools调试Electron主进程。

渲染进程热重载设置借助webpack-dev-server工具，为渲染进程开启热重载，修改代码后页面自动刷新无需重启应用。

调试日志输出配置配置Electron的控制台日志输出规则，结合winston工具，精准捕获调试中的各类运行信息。窗口控制模块整合需整合窗口最小化、最大化、关闭等基础控制功能，可参照VSCode的窗口交互逻辑实现。菜单与快捷键模块整合将自定义菜单、全局快捷键与ElectronAPI绑定，比如设置Ctrl+S触发保存功能。文件系统交互模块整合整合文件读取、写入、路径选择功能，借鉴微信桌面端的本地文件管理逻辑实现。基础功能模块整合典型桌面应用场景开发05自定义窗口与菜单

不规则异形窗口开发可参考抖音PC端的圆角半透明窗口，通过Electron的BrowserWindow配置实现个性化窗口样式。

全局快捷键菜单配置可设置类似VSCode的Ctrl+S保存、Ctrl+F查找等全局快捷键，提升操作便捷性。

上下文右键菜单定制仿照微信PC端右键菜单，为不同页面元素配置专属右键选项，优化交互体验。文件批量重命名实现可借助Electron的fs模块开发批量重命名功能，如图片管理软件可一键整理摄影素材文件名。本地文件内容预览调用Electron的webContentsAPI实现文档、图片等文件预览，类似WPS的本地文件快速预览功能。自定义文件目录同步通过监听文件系统变化事件，开发跨目录文件同步工具，可参考坚果云的本地文件同步逻辑。本地文件系统操作系统通知与对话框基础系统通知推送开发

可模仿微信消息提示，开发定时弹窗通知，支持自定义标题、内容及跳转链接功能。模态对话框交互实现

参考VSCode的确认弹窗，开发带确认/取消按钮的模态框，处理用户关键操作的二次确认。自定义对话框样式开发

仿照钉钉的审批对话框，支持添加表单元素，实现复杂信息的收集与确认交互。原生快捷键绑定

全局快捷键注册可通过Electron的globalShortcut模块，实现如Ctrl+Shift+I唤起调试工具这类全局生效的快捷键绑定。

窗口级快捷键设置利用webContents的registerShortcut方法，为特定窗口绑定如Ctrl+S保存文件的专属快捷键。

快捷键冲突处理借助Electron的shortcutIsRegistered方法检测冲突，像解决与系统截图快捷键冲突的问题。基于ElectronUpdater的基础更新配置配置ElectronUpdater依赖，结合GitHubReleases发布安装包，实现应用的静默检测与提示更新。更新权限与版本校验机制搭建设置版本签名校验，在Windows、macOS系统中配置对应权限，避免未授权更新带来的风险。断点续传与更新失败回退方案开发断点续传逻辑，当更新中断时可恢复下载，同时配置回退机制，确保更新失败后应用能正常启动。自动更新功能实现跨窗口状态同步

多窗口表单数据同步如Electron开发的办公软件，修改A窗口的表单内容，B窗口对应字段会实时同步更新，提升协作效率。

跨窗口主题配置同步开发音乐播放器时，在主窗口切换暗黑模式，弹出的歌词窗口、设置窗口会同步切换主题样式。

多窗口任务进度同步类似Todo类应用，在一个窗口标记任务完成，其他打开的窗口任务列表会同步更新完成状态。项目打包与分发06打包工具选型与配置

ElectronBuilder工具选型与基础配置ElectronBuilder是主流打包工具，支持多平台，只需配置package.json即可快速生成安装包。

ElectronPackager工具选型与参数配置ElectronPackager专注单平台打包，可通过命令行参数定制打包路径、图标等细节。

Vite-plugin-electron工具选型与整合配置Vite-plugin-electron适配Vite项目，能无缝整合打包流程，提升开发与打包效率。多平台打包输出Windows平台打包配置借助ElectronBuilder，配置nsis或msi格式，可生成适配Windows系统的.exe安装包，如VSCode安装程序。macOS平台打包配置利用ElectronPackager或Builder，配置dmg格式，生成适配苹果系统的应用包，类似微信Mac客户端。Linux平台打包配置通过ElectronBuilder配置deb、rpm等格式，生成适配Linux发行版的安装包，如钉钉Linux版。应用签名与分发

代码签名证书申请开发者可向DigiCert、GlobalSign等机构申请代码签名证书，为Electron应用赋予可信标识。

Windows平台应用签名使用signtool工具对打包后的Electron应用签名，避免被WindowsDef