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更多用法，可參考文檔