Electron 原生功能集成

Electron 之所以强大，是因为它不仅能写前端，还能访问系统的原生功能，比如菜单、对话框、托盘、通知和全局快捷键等。

本章节我们来看看如何通过主进程模块调用这些功能。

菜单系统

Electron 提供 Menu 模块用于创建菜单栏、上下文菜单和系统托盘菜单。

应用菜单（Menu）

应用菜单是显示在窗口顶部（macOS）或应用窗口中的菜单栏。

说明：

• label：菜单标题。
• submenu：子菜单数组。
• accelerator：快捷键（macOS、Windows 通用写法 CmdOrCtrl+X）。
• role：系统预定义行为，如 quit、copy、paste。
• click：点击事件回调函数。

上下文菜单（Context Menu）

右键菜单通常在渲染进程中触发：

系统托盘菜单

在系统通知区域显示图标与菜单。

菜单快捷键

通过 accelerator 定义。例如：

{ label: '保存', accelerator: 'CmdOrCtrl+S', click: saveFile }

• CmdOrCtrl：自动适配 macOS/Windows。
• Alt+F4：Windows 关闭窗口。
• Cmd+Q：macOS 退出应用。

系统对话框

dialog 模块提供原生文件、消息、错误等系统对话框。

文件/文件夹选择

const { dialog } = require('electron')
async function openFileDialog() {
  const result = await dialog.showOpenDialog({
    title: '选择文件',
    properties: ['openFile', 'multiSelections'],
    filters: [{ name: '文本文件', extensions: ['txt', 'md'] }]
  })
  console.log(result.filePaths)
}

保存对话框

async function saveFileDialog() {
  const result = await dialog.showSaveDialog({
    title: '保存文件',
    defaultPath: '新建文档.txt'
  })
  console.log(result.filePath)
}

消息/错误对话框

dialog.showMessageBox({
  type: 'info',
  title: '提示',
  message: '操作已完成！'
})

dialog.showErrorBox('错误', '文件保存失败，请重试。')

系统托盘

托盘（Tray）让应用在后台运行时仍能通过系统图标交互。

创建托盘图标

const { Tray } = require('electron')
const path = require('path')

let tray = new Tray(path.join(__dirname, 'trayIcon.png'))

托盘菜单与提示

const contextMenu = Menu.buildFromTemplate([
  { label: '显示窗口', click: () => mainWindow.show() },
  { label: '退出', click: () => app.quit() }
])
tray.setToolTip('Electron 应用运行中')
tray.setContextMenu(contextMenu)

托盘通知

tray.displayBalloon({
  icon: path.join(__dirname, 'icon.png'),
  title: '新消息',
  content: '您有一条新通知'
})

最小化到托盘

监听关闭事件隐藏窗口：

mainWindow.on('close', (event) => {
  event.preventDefault()
  mainWindow.hide()
})

通知（Notifications）

Electron 的 Notification 类可跨平台显示系统通知。

系统通知发送

new Notification({
  title: '任务完成',
  body: '您的文件已下载完成'
}).show()

通知交互处理

const notif = new Notification({ title: '点击通知', body: '点击我触发事件' })
notif.on('click', () => {
  console.log('用户点击了通知')
})
notif.show()

跨平台兼容性

• macOS、Windows、Linux 均支持；
• macOS 需启用"通知权限"；
• Linux 通常需系统支持 libnotify。

全局快捷键

通过 globalShortcut 注册系统级热键。

注册全局快捷键

const { globalShortcut } = require('electron')

app.whenReady().then(() => {
  globalShortcut.register('CmdOrCtrl+Shift+I', () => {
    console.log('快捷键触发：打开调试工具')
    mainWindow.webContents.openDevTools()
  })
})

快捷键冲突处理

注册前可检测：

if (globalShortcut.isRegistered('CmdOrCtrl+Shift+I')) {
  console.log('快捷键已被占用')
}

平台差异处理

可用条件判断：

const shortcut = process.platform === 'darwin' ? 'Cmd+Shift+T' : 'Ctrl+Shift+T'
globalShortcut.register(shortcut, () => console.log('快捷键触发'))

小结

Electron 原生功能演示项目

项目结构

my-electron-native-demo/
├── package.json
├── main.js             # 主进程逻辑
├── preload.js          # 预加载脚本（安全通信）
└── index.html          # 主界面

package.json

注意：不要写注释在 JSON 文件里（否则会报 EJSONPARSE 错误）

{
  "name": "my-electron-native-demo",
  "version": "1.0.0",
  "description": "Electron 原生功能演示项目",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "latest"
  }
}

安装依赖：

npm install

启动应用：

npm start

main.js（主进程）

preload.js（安全桥梁）

index.html（前端界面）

运行 npm start 后，功能如下：

• 顶部菜单栏包含 "文件"、"工具" 菜单。
• "文件" → 打开文件 / 保存文件 调出系统对话框。
• "工具" → 显示系统通知、显示"关于"窗口。
• 托盘区域出现应用图标，可右键显示菜单。
• 窗口关闭后最小化到托盘。
• 注册全局快捷键 CmdOrCtrl+Shift+I 打开开发者工具。