用途:该技能面向使用 Electron 构建跨平台桌面应用的开发场景。Electron 将 Chromium 与 Node.js 打包进桌面应用,适合用 HTML、CSS、JS 构建 macOS、Windows、Linux 原生应用,也适用于需要系统托盘菜单、原生通知、文件系统访问、全局快捷键等深度系统集成的桌面软件,以及 IDE、通信工具、媒体编辑器等高性能离线桌面工具和企业级桌面打包(代码签名、自动更新、x64/arm64 多架构构建)。
主要能力:覆盖主进程与渲染进程架构、IPC 通信、preload 脚本与 contextBridge、打包等主题。核心概念包括通过 preload 脚本实施安全边界,在 webPreferences 中设置 contextIsolation: true、nodeIntegration: false、sandbox: true;用 ipcMain.handle() 与 ipcRenderer.invoke() 实现异步请求-响应式 IPC;在 preload 中通过 contextBridge.exposeInMainWorld 暴露经过审计的安全 IPC 通道,渲染进程再调用这些 API 访问原生桌面能力。
使用方式:主进程创建 BrowserWindow 并加载页面,preload 脚本暴露受限 API,渲染进程调用。示例中主进程用 ipcMain.handle("read-app-version", ...) 返回 app.getVersion(),preload 用 contextBridge 暴露 getAppVersion 与 onFileSaved,渲染进程通过 window.electronAPI 调用。安装需在项目目录执行 npm install --save-dev electron。
最佳实践:始终设置 contextIsolation: true 与 nodeIntegration: false;为所有加载的 HTML 强制 CSP 头以防 XSS;使用 ipcMain.handle()/ipcRenderer.invoke() 做异步 IPC;校验并清理来自渲染进程的 IPC 参数。不要启用 webSecurity: false 或关闭证书校验,不要通过 contextBridge 暴露整个 Node 模块(如 fs、child_process),不要用重计算阻塞主进程事件循环,应交给 utility 进程。
常见问题:渲染进程报 require is not defined,因安全默认下 nodeIntegration 关闭、contextIsolation 开启,需通过 preload 与 contextBridge 暴露必要函数;报 Cannot find module 'electron',因全局安装而非本地 devDependencies,需在项目目录执行 npm install --save-dev electron;生产环境启动白屏,因打包后资源路径失效,应使用 hash 路由或确保构建输出使用相对路径(./)。
限制:资料未提供具体收费、价格、平台支持范围与效果数据,暂未提供。