在 Electron 中，我们不仅可以利用 HTML5 和 JavaScript 构建应用程序的核心界面，还可以充分利用其丰富的原生 UI 元素，如菜单、托盘图标和对话框等，以提供更贴近操作系统的用户体验。

下面我们将深入探讨如何在 Electron 应用中集成并使用这些原生UI元素。

创建主菜单

Electron 允许开发者自定义应用程序的主菜单，包括文件、编辑、视图等常见菜单项以及自定义快捷键。

以下是如何创建一个基本菜单的示例：

const { app, Menu } = require('electron')
const template = [{label: '文件',submenu: [{ role: 'quit' } // 使用预设角色实现退出应用功能]},{label: '帮助',submenu: [{label: '关于',click() {console.log('显示关于对话框');// 在这里调用关于对话框的逻辑}}]}
]if (process.platform === 'darwin') {// macOS平台下添加额外菜单项template.unshift({label: app.getName(),submenu: [{ role: 'about' }, // 显示关于对话框{ type: 'separator' },{ role: 'services', submenu: [] },{ type: 'separator' },{ role: 'hide' }, // 隐藏窗口{ role: 'hideothers' }, // 隐藏其他应用窗口{ role: 'unhide' },{ type: 'separator' },{ role: 'quit' }]})
}const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu) // 设置为应用程序的主菜单

添加系统托盘图标

通过 Electron Tray 模块，我们可以将应用程序最小化到系统托盘，方便用户快速访问。

以下是如何创建并配置托盘图标及右键菜单：

const { Tray, nativeImage } = require('electron')let trayIconPath = path.join(__dirname, 'icon.png')
let tray = new Tray(nativeImage.createFromPath(trayIconPath))// 创建托盘右键菜单
const contextMenu = Menu.buildFromTemplate([{ label: '显示/隐藏主窗口', click: () => toggleMainWindow() },{ type: 'separator' },{ label: '退出', role: 'quit' }
])tray.setToolTip('我的Electron应用') // 设置工具提示
tray.setContextMenu(contextMenu) // 设置右键菜单function toggleMainWindow() {if (mainWindow.isVisible()) {mainWindow.hide()} else {mainWindow.show()}
}

使用对话框

Electron 提供了多种内置对话框，如消息对话框、警告对话框、确认对话框和输入对话框等。

下面是一个使用 dialog 模块展示信息对话框的例子：

const { dialog } = require('electron')// 显示信息对话框
dialog.showMessageBoxSync(mainWindow, {title: '重要通知',message: '这是一条重要的应用消息',detail: '更多详细信息...',buttons: ['确定'] // 自定义按钮文本
})

通过以上代码示例，我们可以直观地看到如何在 Electron 应用中整合原生 UI 元素，使应用与操作系统风格保持一致，并增强用户体验。无论是定制化的菜单结构，还是便捷的托盘图标交互，抑或是关键环节的对话框提示，都体现了 Electron 框架在跨平台桌面应用开发中的强大灵活性与易用性。

当然，Electron 中还有更多原生 UI 元素可以集成到我们的应用程序中。接下来我们继续探索另外两个实用的组件：通知和上下文菜单。

使用系统通知

在 Electron 应用中，我们可以利用 Notification 模块向用户发送桌面通知，这对于提醒或更新信息等场景非常有用：

const { Notification } = require('electron')// 创建并显示一个系统通知
let notification = new Notification({title: '任务完成',body: '您的文件已成功上传',silent: true // 若需要静默通知，则设置为true
})notification.show()// 也可以监听通知的点击事件
notification.on('click', () => {console.log('用户点击了通知')// 在这里执行相应的操作
})

实现上下文菜单（右键菜单）

除了主菜单和托盘图标菜单外，Electron 还支持在网页内容区域自定义上下文菜单。

下面是如何在一个网页元素上添加自定义右键菜单：

const { remote } = require('electron')document.getElementById('myElement').addEventListener('contextmenu', (event) => {event.preventDefault(); // 阻止默认右键菜单出现const menu = new remote.Menu();menu.append(new remote.MenuItem({label: '复制',click: () => {console.log('复制操作');// 实现复制功能的逻辑}}));menu.append(new remote.MenuItem({type: 'separator'}));menu.append(new remote.MenuItem({label: '删除',click: () => {console.log('删除操作');// 实现删除功能的逻辑}}));menu.popup(remote.getCurrentWindow());
});

结语

通过上述实践，您应该已经对如何在 Electron 应用中整合原生 UI 元素有了全面的了解。无论是系统级的菜单、托盘图标、对话框，还是页面内的通知和上下文菜单，Electron 都为我们提供了丰富的 API 以构建出既符合平台规范又高度个性化的用户体验。熟练掌握这些原生 UI 元素的运用，将极大地提升您的 Electron 应用在界面交互与用户体验方面的品质。