在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更多用法,可参考文档

Logo

前往低代码交流专区

更多推荐