HoRain云--Electron API 速查与配置模板
主进程 API 速查表
| 模块 | 功能描述 | 常用方法 | 说明 |
|---|---|---|---|
| app | 控制应用生命周期 | app.on('ready')、app.quit()、app.getPath('userData') | 管理应用启动、退出、路径、协议注册等 |
| BrowserWindow | 创建与管理窗口 | new BrowserWindow(options)、win.loadFile()、win.loadURL()、win.webContents | Electron 应用的主要 UI 容器，内部运行渲染进程 |
| ipcMain | 主进程通信接口 | ipcMain.on(channel, callback)、ipcMain.handle(channel, handler) | 监听渲染进程发来的消息或调用请求 |
| Menu | 创建应用菜单 | Menu.buildFromTemplate(menuTemplate)、Menu.setApplicationMenu(menu) | 可自定义菜单项、快捷键、右键菜单 |
| Tray | 系统托盘管理 | new Tray(icon)、tray.setToolTip()、tray.setContextMenu(menu) | 在任务栏显示图标，常用于后台常驻应用 |
| Dialog | 系统原生对话框 | dialog.showOpenDialog()、dialog.showSaveDialog()、dialog.showMessageBox() | 文件选择、保存、消息提示等系统交互 |
| Notification | 系统通知 | new Notification({ title, body }).show() | 发送系统原生通知，可带点击回调 |
| Shell | 调用系统外部资源 | shell.openExternal(url)、shell.showItemInFolder(path) | 打开外部网页、文件夹、执行文件 |
| Protocol | 注册自定义协议 | protocol.registerFileProtocol()、protocol.handle() | 用于自定义资源加载或深度链接 |
| Session | 管理会话、缓存、Cookie | session.defaultSession.cookies.get()、clearCache() | 对浏览数据和请求做底层控制 |
| Net | 原生 HTTP/HTTPS 网络请求 | net.request(options) | 更底层的网络模块，性能优于fetch |
| PowerMonitor | 监控系统电源状态 | powerMonitor.on('suspend')、on('resume') | 监听电脑睡眠、唤醒、锁屏等状态 |
| Clipboard | 剪贴板操作 | clipboard.readText()、clipboard.writeText() | 支持跨平台复制粘贴文本、图片等 |
| GlobalShortcut | 注册全局快捷键 | globalShortcut.register('CommandOrControl+X', fn) | 跨窗口、后台生效的快捷键 |
渲染进程 API 速查表
| 模块 | 功能描述 | 常用方法 | 说明 |
|---|---|---|---|
| ipcRenderer | 与主进程通信 | ipcRenderer.send()、ipcRenderer.invoke()、ipcRenderer.on() | 用于渲染进程发送、接收、调用主进程事件 |
| webFrame | 控制当前页面内容 | webFrame.setZoomFactor()、webFrame.insertCSS() | 动态修改页面缩放、样式 |
| contextBridge | 安全暴露 API | contextBridge.exposeInMainWorld('api', {...}) | 在启用contextIsolation时安全地与主进程交互 |
| desktopCapturer | 捕获屏幕内容 | desktopCapturer.getSources({ types: ['window', 'screen'] }) | 用于截图或屏幕录制功能 |
| Notification | 通知 API | new Notification('标题', { body: '内容' }) | 使用浏览器标准 Notification 发送通知 |
| Clipboard | 剪贴板操作 | navigator.clipboard.readText() | 可访问系统剪贴板（部分功能受限制） |
| Web Storage / IndexedDB | 本地存储 | localStorage.setItem()、indexedDB.open() | 保存轻量或结构化数据 |
| Fetch / Axios | 网络请求 | fetch(url)、axios.get() | 用于访问远程接口、加载资源 |
| DOM / Window | 页面控制 | document.querySelector()、window.open() | 所有 Web API 均可使用 |
常用辅助模块速查表
| 模块 | 主要功能 | 示例 |
|---|---|---|
| fs | 文件操作 | fs.readFileSync(path)、fs.writeFile(path, data) |
| path | 路径拼接 | path.join(__dirname, 'index.html') |
| os | 系统信息 | os.platform()、os.homedir() |
| child_process | 执行子进程 | exec('ls', callback) |
| electron-store | 持久化配置 | store.set('key', value)、store.get('key') |
| sqlite3 / better-sqlite3 | 本地数据库 | db.prepare('SELECT * FROM notes').all() |
| axios / node-fetch | 网络请求 | axios.post(url, data) |
| node-gyp | 原生模块编译 | node-gyp rebuild |
配置文件模板与说明
package.json 模板与说明
{ "name": "my-electron-app", "version": "1.0.0", "description": "示例 Electron 应用", "main": "main.js", "scripts": { "start": "electron .", "pack": "electron-builder --dir", "dist": "electron-builder" }, "devDependencies": { "electron": "^33.0.0", "electron-builder": "^24.6.0" }, "build": { "appId": "com.example.myelectronapp", "productName": "MyElectronApp", "directories": { "output": "dist" }, "files": [ "main.js", "preload.js", "renderer/**/*" ], "win": { "target": "nsis", "icon": "assets/icon.ico" }, "mac": { "category": "public.app-category.productivity", "icon": "assets/icon.icns" }, "linux": { "target": "AppImage", "icon": "assets/" } } }说明：
| 字段 | 含义 |
|---|---|
| name / version / description | 应用名称、版本号与描述信息 |
| main | 主进程入口文件（必须） |
| scripts | 定义命令脚本，npm start启动，npm run dist打包 |
| devDependencies | 开发依赖（Electron、打包工具等） |
| build | electron-builder的配置项 |
| appId | 应用唯一 ID，用于签名和更新识别 |
| productName | 打包后显示的应用名称 |
| directories.output | 打包输出路径 |
| files | 指定要打包进应用的文件和目录 |
| win/mac/linux | 各平台独立打包配置（图标、目标格式） |
electron-builder.yml 模板与说明
appId: com.example.myelectronapp productName: MyElectronApp directories: output: dist files: - "main.js" - "preload.js" - "renderer/**/*" win: target: nsis icon: assets/icon.ico mac: target: dmg icon: assets/icon.icns linux: target: AppImage icon: assets/ publish: provider: github repo: my-electron-app owner: username
说明：
| 配置项 | 说明 |
|---|---|
| appId / productName | 应用唯一标识与名称 |
| directories.output | 打包输出目录 |
| files | 打包文件列表（支持通配符） |
| win / mac / linux | 不同系统的构建目标与图标配置 |
| publish | 自动更新时的发布源配置（如 GitHub Releases） |
TypeScript tsconfig.json 模板与说明
{ "compilerOptions": { "target": "ES2020", "module": "commonjs", "strict": true, "outDir": "./dist", "rootDir": "./src", "esModuleInterop": true, "moduleResolution": "node", "resolveJsonModule": true, "skipLibCheck": true }, "include": ["src/**/*"], "exclude": ["node_modules"] }说明：
| 选项 | 含义 |
|---|---|
| target | 编译目标 JavaScript 版本 |
| module | 模块系统，Electron 主进程一般使用commonjs |
| outDir / rootDir | 输出与源码目录 |
| strict | 启用严格类型检查 |
| esModuleInterop | 允许默认导入非 ES 模块 |
| resolveJsonModule | 支持导入 JSON 文件 |
| skipLibCheck | 跳过声明文件检查，加快编译速度 |