Introduction to the setting of the vacuum system tray for the nanny level

This is the 9th day of my participation in Gwen Challenge

preface

When developing applications using Electron, we often need to set up the system tray to implement some functions; For example, when I develop music software, I need to realize background music playback, so I need to set the Electron tray.

Here is how to set up the Electron tray. The tray is a system-level operation, so it is set up in the main process. Note before you start that the setup tray must be after the program is ready, do not use Electron’s default window, and set your window close button to hide rather than exit.

 let win = new BrowserWindow({
        frame: false,
 })
 
 ipcMain.on('close'.e= >
  win.hide()
)
Copy the code

When setting up the tray in Electron, it is mainly composed of three parts: icon, left button event and right button event

start

1. The icon

As explained at the beginning, the Tray must be set after the program is ready, so we first check if the program is started and then use New Tray().

app.on('ready'.async() = > {if(isDevelopment && ! process.env.IS_TEST) { }// Set the tray
  const tray = new Tray('icon.png')
  // Create render window
  createWindow()
})
Copy the code

It is important to note that the path of the tray icon should not be under SRC, because it may be repackaged after packaging, resulting in the situation that the icon path cannot be found. So you can create a folder under SRC to store tray ICONS and app ICONS.

2. Left key and hover

Most applications need to be realized. Left-click on the tray icon to display the application, and hover icon can display some information

app.on('ready'.async() = > {if(isDevelopment && ! process.env.IS_TEST) { }// Set the tray
  const tray = new Tray('icon.png')
  
  tray.setToolTip('Miguu')
  tray.on('click'.() = > {
    win.show()
  })
  // Create render window
  createWindow()
})
Copy the code

As you can see, we use tray.setTooltip (‘Miguu’) to set the information that appears after the hover, which accepts a string, usually to display the name of the app. I’m a music app and I want it to display the name of the song being played.

To do this, the Electron renderer communicates with the main process, sending the renderer’s song information to the main process.

    ipcRenderer.send('songName', this.$store.state.songData.songName)
Copy the code

    ipcMain.on('songName', async (_e, data) => {
        tray.setToolTip(data)
    })
Copy the code

usetray.on('click', () => {})To listen for mouse click events

    app.on('ready'.async() = > {if(isDevelopment && ! process.env.IS_TEST) { }// Set the tray
      const tray = new Tray('icon.png')

      // Set the information after hover
      ipcMain.on('songName'.async (_e, data) => {
            tray.setToolTip(data)
        })
       // Set the left mouse button event
      tray.on('click'.() = > {
        win.show()
      })

      // Create render window
      createWindow()
    })
Copy the code

Right-click the list

Here we use tray.on(‘right-click’, () =>{tray.popupContextMenu (trayContextMenu)}) to listen for right-click events and popUpContextMenu to load the right-click list menu

    app.on('ready'.async() = > {if(isDevelopment && ! process.env.IS_TEST) { }// Set the tray
      const tray = new Tray('icon.png')

      // Set the information after hover
      ipcMain.on('songName'.async (_e, data) => {
            tray.setToolTip(data)
        })
      // Set the left mouse button event
      tray.on('click'.() = > {
        win.show()
      })
      // Set the right mouse button event
      tray.on('right-click'.() = > {
        tray.popUpContextMenu(trayContextMenu)
      })

      // Create render window
      createWindow()
    })
Copy the code

Then, we start to edit the trayContextMenu. The label, icon, click, Type and role parameters can be set

const trayContextMenu = Menu.buildFromTemplate([
    {
      label: 'Play/Pause'.icon: 'resources/ico/play.png'.click: () = > {
        win.webContents.send('playMusic')}}, {label: 'Next'.icon: 'resources/ico/next.png'.click: () = > {
        win.webContents.send('nextMusic')}}, {label: 'Previous song'.icon: 'resources/ico/prev.png'.click: () = > {
        win.webContents.send('prevMusic')}}, {type: 'separator'
    },
    {
      label: 'exit'.icon: 'resources/ico/quit.png'.role: 'quit'}])Copy the code

Implementation effect

label

Set the name to receive a string

icon

Set icon, default in front of the string, to receive a string

click

To set the custom click event, we use win.webcontents. send to actively communicate with the render process to pause and switch the song

type

Set type to receive a string, default normal, normal, separator, submenu, checkbox, or Radio

role

Set basic click events such as close, minimize, maximize, and so on. These methods can also be implemented on their own, but Electron recommends using roles for greater efficiency.

The complete code

app.on('ready'.async() = > {if(isDevelopment && ! process.env.IS_TEST) { }// Set the tray icon
  tray = new Tray('resources/ico/ic_launcher.png')
  // Set the right-click menu list
  const trayContextMenu = Menu.buildFromTemplate([
    {
      label: 'Play/Pause'.icon: 'resources/ico/play.png'.click: () = > {
        win.webContents.send('playMusic')}}, {label: 'Next'.icon: 'resources/ico/next.png'.click: () = > {
        win.webContents.send('nextMusic')}}, {label: 'Previous song'.icon: 'resources/ico/prev.png'.click: () = > {
        win.webContents.send('prevMusic')}},/ / break line
    {
      type: 'separator'
    },
    {
      label: 'exit'.icon: 'resources/ico/quit.png'.role: 'quit'}])// Listen to songName set hover message
  ipcMain.on('songName'.async (_e, data) => {
    tray.setToolTip(data)
  })
  // Listen for the left mouse button
  tray.on('click'.() = > {
    win.show()
  })
  // Listen for the right mouse button
  tray.on('right-click'.() = > {
    tray.popUpContextMenu(trayContextMenu)
  })

  // Create render window
  createWindow()
})
Copy the code

end

Here is a very detailed introduction of the Electron tray common Settings, I hope to be helpful to friends in need.

Thank you all for clicking on this post, or a little like if you can.

The migu music project mentioned above is now open source on Github

Making the address

For a star, please

Win version download address password: 0000

A column to document your own learning: Oasis Engine Learning Notes from scratch

respect by myself