1. 开篇为什么你需要了解Electron如果你是一个前端开发者或者对Web技术比较熟悉那么你肯定有过这样的想法我写的这些网页能不能直接变成一个独立的、能安装在电脑上的软件呢比如你用Vue或React写了一个很棒的工具页面你想把它分享给朋友但朋友说“啊还要打开浏览器输入网址好麻烦”。这时候Electron就登场了。简单来说Electron能让你用你熟悉的HTML、CSS和JavaScript直接构建出Windows、macOS和Linux上的桌面应用程序。你每天用的Visual Studio Code、Slack、Discord甚至新版桌面版QQ它们的“身体”里都流淌着Electron的血液。我知道一听到“桌面应用”、“原生API”、“进程通信”这些词你可能觉得头大感觉又要学一套全新的、复杂的东西。别担心这正是我写这篇文章的目的。我当年第一次接触Electron时也被各种概念绕得晕头转向什么主进程、渲染进程感觉比写网页复杂多了。但后来我发现一旦你理解了它的核心架构上手速度其实快得惊人。今天我就用我这几年踩过坑、填过坑的经验带你在一小时内从“这是什么”到“嘿我的第一个桌面应用跑起来了”。我们不讲空泛的理论直接从它的“心脏”开始解剖然后手把手带你敲出第一个窗口。相信我跟着走完这一趟你不仅能看懂Electron应用是怎么跑起来的还能自己动手搭建一个基础框架。2. 剥开外壳Electron的“三明治”架构到底是什么很多教程一上来就说“Electron Chromium Node.js”这个说法对但不够完整容易让人产生误解。我更喜欢把它比喻成一个“三明治”或者“三层夹心蛋糕”。最上面一层是Chromium负责给你一个漂亮的、能渲染网页的窗口最下面一层是Node.js赋予你这个应用在用户电脑上“为所欲为”的能力比如读写文件、操作数据库而中间最关键的那层粘合剂就是Native API原生API。少了这一层你的应用就只是个披着本地软件外衣的浏览器标签页。让我用个更生活的例子来解释。假设你想开一家既能线上点单网页功能又能现场制作美食系统操作的“数字餐厅”。Chromium就是你餐厅的门面和厨房展示区顾客用户在这里通过精美的菜单HTML/CSS点餐看到食物制作过程JavaScript交互。但你的厨房系统后台需要接入水电燃气系统资源、采购食材读写本地文件这些Chromium自己搞不定。这时候Node.js就是你的后厨总管它有权限去调用这些基础设施。而Native API就是标准化的操作手册和接口它告诉Node.js在Windows系统里怎么开水阀在macOS里怎么开燃气你不用关心底层具体怎么拧阀门只需要调用“打开水源()”这个统一的命令就行。所以Electron的本质是让Chromium的渲染能力、Node.js的系统操作能力通过Native API这座桥梁无缝协作。你写的Vue/React组件最终会被Chromium渲染成窗口里的界面而当你需要保存一个用户设置文件到“我的文档”时你的代码会通过Electron提供的通道让Node.js去执行fs.writeFile。这种融合让你既能享受Web开发的快速和生态又能获得原生应用的能力和体验。理解了这个“三明治”模型后面所有的概念比如进程都是在这个模型上展开的。3. 核心运转模型主进程与渲染进程的“双簧戏”理解了架构我们得看看它是怎么跑起来的。这就是Electron的流程模型核心就是两个角色主进程Main Process和渲染进程Renderer Process。你可以把它想象成一场双簧表演。3.1 主进程后台的“总导演”主进程通常就是你项目根目录下的那个main.js文件名字可以改但约定俗成叫这个。它是整个Electron应用的入口和大脑只有一个。它的运行环境是一个纯净的Node.js环境。这意味着什么意味着在这个main.js文件里你可以毫无顾忌地使用require引入模块用fs读写文件用path处理路径所有Node.js的能力你都可以直接调用。但是正因为它是纯粹的Node环境所以它没有浏览器里的那些对象。你在主进程里写document.getElementById或者window.alert是会报错的它不认识这些因为它根本没有DOM和BOM的概念。主进程的核心职责是“管理”它用app模块管理应用的生命周期比如什么时候启动、什么时候退出用BrowserWindow模块创建和管理一个个应用窗口。它就像是剧组的导演待在后台不直接面对观众用户但指挥着一切。3.2 渲染进程前台的“演员”每一个由BrowserWindow创建出来的窗口背后都对应着一个渲染进程。你打开一个Electron应用弹出一个设置窗口这个新窗口通常就对应一个新的渲染进程。渲染进程的环境就和我们日常写前端时一模一样了一个Chromium渲染引擎提供的浏览器环境。在这里你可以操作DOM可以使用alert、console.log可以跑Vue、React框架可以引入Axios发请求和你开发一个网页没有任何区别。但是这个“浏览器”是被限制的。出于安全考虑默认情况下渲染进程不能直接访问Node.js的API你不能在渲染进程的JavaScript里直接写require(‘fs’)去删用户文件。这就像舞台上的演员虽然在前台表演但不能随便跑到后台去动导演的设备和剧本。这种设计非常重要它防止了来自网络的恶意代码比如你加载了一个第三方网页对用户系统造成破坏。3.3 联系与区别他们如何“对暗号”那么前台演员渲染进程需要后台导演主进程帮忙办点事比如保存文件怎么办这就需要进程间通信IPC Inter-Process Communication。Electron提供了一套完善的IPC机制让主进程和渲染进程可以安全地互相传递消息和数据。举个例子在渲染进程一个Vue组件里用户点击“保存”按钮需要把数据存成一个本地.json文件。渲染进程自己没权限它就通过IPC给主进程发个消息“嘿导演帮我把这段数据存到D:/data/config.json里”。主进程收到消息后调用Node.js的fs模块执行写入操作完成后再通过IPC回个消息“办妥了”。渲染进程收到回信就可以在界面上给用户显示“保存成功”的提示。它们的区别总结一下就是环境主进程是Node.js环境渲染进程是浏览器环境。数量主进程有且仅有一个渲染进程可以有多个每个窗口一个或多个窗口共享一个。权限主进程拥有全部Node.js和系统原生API调用权限渲染进程默认只有Web API权限需要特殊配置或通过IPC才能间接使用Node.js能力。职责主进程管理应用和窗口生命周期渲染进程负责界面展示和用户交互。搞懂了这场“双簧戏”你就掌握了Electron应用运行的核心脉络。接下来我们不再空谈直接动手让理论落地。4. 从零到一构建你的第一个Electron应用“Hello World”理论说再多不如亲手敲一遍。这个部分我们抛开一切脚手架和复杂工具就用最原始的方式从零创建一个Electron应用。你会清晰地看到每一个文件是如何产生的每一条命令是什么作用。4.1 环境准备打好地基首先你需要一个基础环境Node.js。这是Electron的基石。我强烈建议你使用nvmNode Version Manager来管理Node.js版本这能让你在不同项目间切换版本时游刃有余。去nvm的GitHub仓库下载安装包安装完成后在终端里执行一条命令就能装上最新的长期支持版nvm install 18 nvm use 18安装好后打开你的终端命令行输入node -v和npm -v如果能显示出版本号比如v18.20.0和10.7.0那就说明环境OK了。另外为了后续安装包速度更快建议把npm的镜像源切换到国内源npm config set registry https://registry.npmmirror.com/4.2 项目初始化创建你的工作区接下来找个你喜欢的地方新建一个文件夹名字随意比如my-first-electron-app。然后用你的代码编辑器比如VSCode打开这个文件夹并打开集成终端。我们将在这里执行所有命令。第一步初始化一个npm项目这会生成一个package.json文件来记录你的项目信息和依赖npm init -y那个-y参数的意思是“对所有问题都回答yes”省去你一路回车的麻烦。执行完后你会看到文件夹里多了一个package.json文件。4.3 引入核心安装Electron现在我们来安装今天的主角——Electron。注意我们把它安装为开发依赖devDependency因为最终打包时Electron的运行时会被包含进去你的源代码并不直接依赖它。npm install electron --save-dev这条命令会从镜像源下载Electron包。由于Electron本身体积不小可能需要等待一会儿。安装成功后你的package.json文件里devDependencies部分会多出一项electron: ^版本号。4.4 编写主进程脚本让应用“活”起来还记得我们说的“总导演”吗现在我们来创建它。在项目根目录下新建一个文件命名为main.js。这个文件就是我们的主进程入口。打开main.js让我们写下第一行代码// main.js const { app, BrowserWindow } require(electron);这行代码从electron模块中引入了两个最重要的类app和BrowserWindow。app代表整个应用程序BrowserWindow则用来创建和控制浏览器窗口。接下来我们需要监听应用“准备就绪”的事件。只有当app就绪后我们才能开始创建窗口。app.whenReady().then(() { console.log(应用准备就绪开始创建窗口...); // 在这里创建窗口 });app.whenReady()返回一个Promise我们可以在.then()回调里执行初始化操作。现在让我们在回调里创建一个宽800像素、高600像素的窗口app.whenReady().then(() { console.log(应用准备就绪开始创建窗口...); const mainWindow new BrowserWindow({ width: 800, height: 600, // 可选隐藏默认的菜单栏让窗口更简洁 autoHideMenuBar: true }); // 加载内容到窗口 // 我们先尝试加载一个简单的网页 mainWindow.loadURL(https://www.electronjs.org); });我们创建了一个BrowserWindow实例并把它赋值给变量mainWindow以便后续引用。然后我们调用loadURL方法让这个窗口加载Electron的官网。这就像在浏览器里打开了一个新标签页一样。最后我们需要处理一下所有窗口都关闭后的情况。在macOS上应用通常不会直接退出我们需要显式地监听窗口关闭事件。// 监听所有窗口关闭的事件非macOS平台 app.on(window-all-closed, () { if (process.platform ! darwin) { app.quit(); } }); // 在macOS上当点击dock图标且没有其他窗口打开时重新创建一个窗口 app.on(activate, () { if (BrowserWindow.getAllWindows().length 0) { createWindow(); // 这里需要把创建窗口的逻辑封装成函数我们稍后优化 } });4.5 配置与运行点亮你的第一个窗口主进程脚本写好了我们还需要告诉Electron从哪里启动。打开package.json文件找到main字段把它改成我们主进程文件的路径{ name: my-first-electron-app, version: 1.0.0, main: main.js, scripts: { start: electron . }, devDependencies: { electron: ^29.0.0 } }同时我们在scripts里添加一条start: electron .的命令。这样我们就可以用npm start来启动应用了。现在激动人心的时刻到了在终端里运行npm start几秒钟后你应该会看到一个桌面窗口弹出来里面显示着Electron的官方网站你的第一个Electron应用成功运行了虽然它现在只是加载了一个网页但你已经完成了一个完整的Electron应用从环境搭建、初始化、编码到运行的全过程。这个窗口就是一个完整的、独立的桌面应用程序窗口而不是浏览器标签页。你可以尝试拖动它、最大化、最小化感受一下它和普通软件窗口的别无二致。4.6 更进一步从加载网页到加载本地界面加载外部网站只是演示我们真正想做的是运行自己的前端代码。让我们来改进一下。首先在项目根目录下创建一个index.html文件!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个Electron应用/title style body { margin: 0; padding: 40px; font-family: sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; } h1 { font-size: 3em; margin-bottom: 20px; } button { padding: 15px 30px; font-size: 1.2em; border: none; border-radius: 50px; background: white; color: #667eea; cursor: pointer; font-weight: bold; transition: transform 0.2s; } button:hover { transform: scale(1.05); } /style /head body h1 你好Electron/h1 p这是我的第一个桌面应用窗口。/p button idclickMe点我试试/button script document.getElementById(clickMe).addEventListener(click, () { alert(你好来自渲染进程的问候); }); /script /body /html然后修改main.js中的loadURL那一行从加载远程URL改为加载本地文件。这里需要注意路径问题。我们使用Node.js的path模块和__dirname变量来构建绝对路径这样更可靠。// 在文件顶部引入 path 模块 const path require(path); // ... 在 whenReady 的回调函数内修改 loadURL 部分 mainWindow.loadFile(path.join(__dirname, index.html));__dirname代表当前main.js文件所在的目录path.join能帮我们跨平台地拼接出index.html的完整路径。保存所有文件再次运行npm start。现在窗口里显示的就是我们自定义的、带有渐变背景和交互按钮的HTML页面了点击按钮会弹出原生的警告框。至此你已经完成了一个具备本地界面和基础交互的完整Electron应用雏形。5. 深入窗口控制让你的应用更像“原生软件”现在应用能跑了但看起来还有点“简陋”。我们来看看如何通过配置BrowserWindow让它行为更符合一个桌面应用的习惯。5.1 常用窗口配置详解创建BrowserWindow时传入的那个配置对象功能非常强大。我们来试试几个常用的const mainWindow new BrowserWindow({ width: 1000, height: 700, // 不显示默认的菜单栏File, Edit, View... autoHideMenuBar: true, // 窗口图标需要准备一个 .ico 或 .png 文件 icon: path.join(__dirname, assets, icon.png), // 窗口标题 title: 我的专属应用, // 窗口背景色在加载页面内容前显示 backgroundColor: #2e2e2e, // 是否允许改变窗口大小 resizable: true, // 窗口是否可以最小化、最大化、关闭 minimizable: true, maximizable: true, closable: true, // 窗口是否始终显示在最前面 alwaysOnTop: false, // 是否显示窗口边框和标题栏设置为false可创建无边框窗口 frame: true, // 窗口是否透明需要结合 frame: false 使用 transparent: false, // 窗口是否在创建后立即显示 show: true, // 网页功能的偏好设置 webPreferences: { // 这是一个非常重要的安全设置我们下篇会详细讲 nodeIntegration: false, // 预加载脚本的路径进程通信的关键 preload: path.join(__dirname, preload.js) } });你可以像搭积木一样组合这些配置来打造你想要的窗口样式和行为。比如设置frame: false和transparent: true你就能做出那种不规则形状、毛玻璃效果的“现代化”应用界面。5.2 管理窗口生命周期窗口创建了我们还需要妥善管理它。比如你可能会想阻止用户直接关闭窗口而是先弹出一个确认框。// 监听窗口关闭事件在关闭之前触发 mainWindow.on(close, (event) { // 阻止默认的关闭行为 event.preventDefault(); // 这里可以显示一个自定义的对话框询问用户 // 为了示例我们简单使用控制台日志 console.log(用户试图关闭窗口可以在这里做保存或确认操作。); // 如果确认要关闭可以调用 mainWindow.destroy(); });在实际项目中你可能会在这里检查文档是否需要保存或者询问用户“确定要退出吗”。掌握了这些你就从一个“能跑通”的初学者向“做得精致”的实践者迈进了一步。窗口是用户与你的应用交互的主要界面把它打磨好用户体验会提升很多。