Electron实现将桌面应用放入系统托盘，并实现有新消息闪动功能

在vue+electron项目中，实现系统托盘和新消息闪动功能

官方描述： 用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区，通常被添加到一个 context menu 上.

1. 用 new Tray('/path/to/my/icon'); 创建一个与image相关的图标
2. 给该图标绑定click事件， 单击该系统托盘图标，控制窗口的显示隐藏。
3. Tray.setToolTip(toolTip) 方法实现鼠标放在图标上，显示提示信息，类似元素的title属性。
4. 通过 Menu.buildFromTemplate 创建菜单，可用position属性和id为菜单项指定位置。
5. Tray.setContextMenu(menu) 方法，给该图标设置菜单内容。
6. 在创建菜单项时，如果有匹配的方法，建议指定 role 属性，不需要人为操作它的行为，这样菜单使用可以给用户最好的体验。
7. 菜单选项中，可指定 role 属性来做一些事情，用 accelerator 属性来设置快捷键

background.js文件中：

	// 系统托盘
var appIcon = null

function implementSystemTray() {
  appIcon = new Tray('./public/favicon.ico') // 创建与image关联的图标
  var contextMenu = Menu.buildFromTemplate([ // 创建菜单
    {
      label: '上一首',
      type: 'radio',
      click: function() {
        console.log('播放上一首歌曲')
      }
    },
    { label: '下一首', type: 'radio' },
    { label: '打开桌面歌词', type: 'radio', checked: true },
    { label: '退出', role: 'close', accelerator: 'CmdOrCtrl+Q' }
  ])
  appIcon.setToolTip('This is demo') // 鼠标放在该系统托盘图标上的提示信息
  appIcon.setContextMenu(contextMenu)

  // 消息通知，利用计时器，通过Image实例和空的Image实例 来实现图标闪动效果；
  let timer = null
  let msgFlag = false
  ipcMain.on('have-message', (event, arg) => {
    timer = setInterval(() => {
      msgFlag = !msgFlag
      msgFlag ? appIcon.setImage(nativeImage.createEmpty()) : appIcon.setImage('./public/favicon.ico')
      appIcon.setToolTip('您有一条新消息')
    }, 500)
  })

  appIcon.on('click', (_event, _bounds, _position) => { // 单击该系统托盘图标，显示隐藏窗口
    if (win.isVisible()) {
      win.hide()
    } else {
      win.show()
      appIcon.setImage('./public/favicon.ico') // 防止 win.show() 后系统托盘图标的 空白现象；
      clearInterval(timer)
      timer = null
      msgFlag = false
    }
  })
}
 // electron完成初始化的时候触发
   app.on('ready', async() => {
        implementSystemTray();
    })

效果图如下：

注意，消息闪动部分，涉及渲染进程，需渲染进程通知主进程有新消息，

渲染进程代码：

header.vue 文件中：

  //触发条件需据实际情况而定：
 <el-button @click="handleClickSendMsg" >我是xxx</el-button>

 // 方法如下：
 handleClickSendMsg() {
      ipcRenderer.send('have-message')
      console.log('给主进程 发送消息')
      // 这里可放一个音频文件
      /*const audio=new Audio('audio的路径');
        audio.play(); */
}

banground.js的完整写法，参考vue+Electron项目,Electron更多用法，可参考文档