用途
本技能用于使用 Electron 框架开发 Windows、macOS、Linux 跨平台桌面应用。适用于构建跨平台桌面软件、实现原生操作系统功能,或将 Web 应用打包为桌面应用。
支持的平台
| 平台 | 架构 | 备注 |
|---|---|---|
| Windows | x64, arm64, ia32 | Windows 10+ |
| macOS | x64, arm64 (Apple Silicon) | macOS 10.15+ |
| Linux | x64, arm64, armv7l | 大多数发行版 |
项目结构
资料给出了标准目录结构,分离主进程(main)、渲染进程(renderer)和共享代码(shared),并在 resources 中按平台放置不同格式的应用图标(icns、ico、png),配置文件包括 electron-builder.yml、package.json 和 forge.config.ts。
主要能力
- 主进程:创建 BrowserWindow,配置窗口尺寸、安全选项(contextIsolation、nodeIntegration、sandbox)、标题栏样式和显示时机;区分开发与生产环境加载 URL 或本地文件。
- Preload 脚本:通过 contextBridge 向渲染进程暴露受控 API,包括文件打开/保存、获取版本、窗口最小化/最大化/关闭,以及更新可用的事件订阅与退订;同时提供 TypeScript 类型声明。
- IPC 通信:使用 ipcMain.handle 与 ipcMain.on 处理文件对话框、读写文件、窗口控制等操作。
- 渲染进程(React):在组件中调用暴露的 API,实现版本获取、文件打开保存、更新提示、自定义标题栏控件;配合 CSS 使用 -webkit-app-region 实现可拖拽标题栏。
- 原生功能:系统托盘(Tray + 菜单 + 提示 + 点击事件)、原生应用菜单(含快捷键 accelerator 与 role)、系统通知(Notification)、自动更新(electron-updater 的检查、下载与安装事件)。
使用方式
代码以 TypeScript 编写,前端使用 React,打包使用 electron-builder。资料提供了 electron-builder.yml 配置示例,涵盖 appId、productName、mac(dmg/zip、x64/arm64、hardenedRuntime、notarize)、win(nsis)、linux(AppImage/deb/rpm)以及 GitHub 发布配置。构建命令包括开发(npm run dev)、当前平台构建、全平台构建以及指定平台构建。
安全实践
建议:始终使用 contextIsolation: true、通过 preload 脚本进行 IPC、校验所有 IPC 输入、启用 sandbox: true、发布时进行签名与公证。避免:启用 nodeIntegration、使用 remote 模块、加载不受信任内容、暴露完整 Node.js API、跳过代码签名。
备选框架
- Tauri:更小的包体积、Rust 后端
- Neutralino:轻量、系统 WebView
- Electron:完整 Node.js、成熟生态
限制
资料未提供具体的安装命令、依赖版本、性能或兼容性基准数据,也未说明收费或授权信息。