无需专业编程经验，3步带你打造Electron系统托盘

2024-02-10 19:14:35

创建Electron项目

首先，您需要创建一个Electron项目。您可以使用Electron官方网站提供的工具来创建项目，也可以使用命令行工具来创建项目。

npm install -g electron
electron init my-app

设置系统托盘

在Electron项目中设置系统托盘非常简单，您只需要在应用程序的 main.js 文件中添加以下代码即可：

const {app, Tray, Menu} = require('electron')

function createTray() {
  const tray = new Tray('path/to/icon.png')
  const contextMenu = Menu.buildFromTemplate([
    {label: 'Item 1', click: () => { /* do something */ }},
    {label: 'Item 2', click: () => { /* do something else */ }}
  ])
  tray.setToolTip('This is my application.')
  tray.setContextMenu(contextMenu)
}

app.whenReady().then(() => {
  createTray()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

这段代码首先导入必要的模块，然后创建一个新的托盘。接下来，创建一个上下文菜单，并在托盘上设置它。最后，在应用程序准备就绪时创建托盘，并在应用程序的所有窗口都被关闭时退出应用程序。

自定义托盘

您可以使用各种方法来自定义托盘。例如，您可以更改托盘的图标、工具提示和上下文菜单。您还可以添加通知和菜单。

更改托盘图标

要更改托盘的图标，只需在创建托盘时传递一个新的图标路径即可。例如：

const tray = new Tray('path/to/new-icon.png')

更改托盘工具提示

要更改托盘的工具提示，只需在创建托盘时调用 setToolTip() 方法即可。例如：

tray.setToolTip('This is my new application.')

更改托盘上下文菜单

要更改托盘的上下文菜单，只需在创建托盘时传递一个新的上下文菜单模板即可。例如：

const contextMenu = Menu.buildFromTemplate([
  {label: 'New Window', click: () => { /* create a new window */ }},
  {label: 'Quit', click: () => { /* quit the application */ }}
])

tray.setContextMenu(contextMenu)

添加通知

要向托盘添加通知，只需调用 showBalloon() 方法即可。例如：

tray.showBalloon({
  title: 'New Notification',
  content: 'This is a new notification.'
})

添加菜单

要向托盘添加菜单，只需调用 setContextMenu() 方法即可。例如：

const menu = Menu.buildFromTemplate([
  {label: 'Item 1', click: () => { /* do something */ }},
  {label: 'Item 2', click: () => { /* do something else */ }}
])

tray.setContextMenu(menu)