electron个人工具之托盘

知识点说明

1. 在electron中有个Tray类,我们通过它就能创建和销毁小托盘.
2. Tray类实例有两个常用方法:①setToolTip(),②setContextMenu().
3. setToolTip()当你移动鼠标到小托盘上面,会出现提示用户的信息.
4. setContextMenu()当你右键点击小图标时会出现菜单
5. 有点绕的就是setContextMenu()设置的menu,当触发里面设置的菜单中的点击事件时,必须先发送事件给渲染进程,再通过渲染进程发送事件给主进程.

下面用实例片段来说明下(windows系统): 主进程

const path = require('path')
const {ipcMain,app,Menu,Tray} = require('electron')
//小托盘的引用
let appIcon;
//自定义菜单,准备小托盘用
const contextMenu = Menu.buildFromTemplate([
    {
       label:'remove',
       //这里有点绕,这个事件是发送给渲染进程的,再由渲染进程告诉进程
       click:(event) =>{
           event.sender.send('tell-renderer-to-remove-tray')
       }     
    }
])

//监听渲染进程的put-in-tray事件,创建托盘实例,要重点掌握
ipcMain.on('put-in-tray',(event)=>{
    //托盘图片所在路径,图片尺寸是24的png
    const iconPath=path.join(__dirname,images/icon.png)
    //创建托盘(这一步就有了小托盘)
    appIcon=new Tray(iconPath)
    //给鼠标移动到托盘的小提示
    appIcon.setToolTip('我是提示')
    //给托盘绑定菜单
    appIcon.setContextMenu(contextMenu)
})

//监听渲染进程的'remove-tray'事件,摧毁托盘实例
ipcMain.on('remove-tray',()=>{
    appIcon.destroy()
})

渲染进程

const {ipcRenderer} = require('electron')
//我们绑定了一个按钮用来控制托盘
const trayBtn = document.getElementById('put-in-tray')

//按钮监听点击事件,发送put-in-tray给主进程
trayBtn.addEventListener('click',()=>{
    ipcRenderer.send('put-in-tray')
})
//接收主进程返回的tell-renderer-to-remove-tray事件,发送remove-tray给主进程
ipcRenderer.on('tell-renderer-to-remove-tray',()=>{
    ipcRenderer.send('remove-tray')
})

把托盘融入个人工具中

主进程

//托盘菜单
const trayMenu = Menu.buildFromTemplate([
    {
       label:'退出',
       click:(event) =>{
            // event.sender.send('prepare-detroy-tray')
            app.quit()
       }     
    }
])
//监听创建托盘事件
ipcMain.on('create-tray',(event)=>{
    const iconPath=path.join(__dirname,'images/icon.png')
    appIcon=new Tray(iconPath)
    appIcon.setToolTip('个人工具')
    appIcon.setContextMenu(trayMenu)
    //绑定点击事件,显示窗口,并摧毁托盘
    appIcon.on('click',()=>{
        mainWindow.show();
        appIcon.destroy()
    })
    //隐藏窗口
    mainWindow.hide();
})

渲染进程

//最小化托盘
$("#minBtn").on('click',()=>{
    ipcRenderer.send('create-tray');
})

结束语

具体代码可以到我的仓库下载代码