Electron开发实战之记帐软件6——自定义系统托盘菜单、闪烁

代码仓库： https://github.com/hilanmiao/LanMiaoDesktop

自定义系统托盘

在src-main-index.js中添加相关代码

// 是否能够退出
    trayClose = false
    // 系统托盘右键菜单
    trayMenuTemplate = [
        {
            label: '托盘闪烁',
            click: function () {

            }
        },
        {
            label: '关于项目',
            click: function () {
                // 打开外部连接
                shell.openExternal('https://github.com/hilanmiao/LanMiaoDesktop')
            }
        },
        {
            label: '退出',
            click: function () {
                // 退出
                trayClose = true
                app.quit()
            }
        }
    ]
    // 系统托盘图标
    iconPath = `${__static}/icon.ico`
    appTray = new Tray(iconPath)
    // 图标的上上下文
    contextMenu = Menu.buildFromTemplate(trayMenuTemplate)
    // 设置此托盘图标的悬停提示内容
    appTray.setToolTip(Title)
    // 设置此图标的上下文菜单
    appTray.setContextMenu(contextMenu)
    // 主窗口显示隐藏切换
    appTray.on('click', () => {
        mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show()
    })

核心代码就这么多，固然你确定先要引入相关的模块了，定义相关变量了，具体信息直接查看个人源代码。

图标咱们放到了static文件夹下了，文件头部已经把路径放到global下了,因此这样引用便可 iconPath = ${__static}/icon.ico

关闭最小化到托盘

上一篇咱们自定义了关闭最大和最小化按钮，可是发现点击关闭后直接就关了，咱们想要的是关闭后只是隐藏，点击托盘还能显示，常规需求。原理是监听close事件，而后hide窗口。

mainWindow.on('close', (event) => {
        if (!trayClose) {
            // 最小化
            mainWindow.hide()
            event.preventDefault()
        }
    })

给菜单添加事件

直接在模板中定义，例如：

{
            label: '关于项目',
            click: function () {
                // 打开外部连接
                shell.openExternal('https://github.com/hilanmiao/LanMiaoDesktop')
            }
        },

执行click事件打开外部连接，使用Shell模块，在文件头咱们已经import了。shell.openExternal(url)

托盘图标闪烁

闪烁的原理就是图片替换而已，作的简单点就是两张图片，作的复杂点就是根据不一样的业务显示不一样的图标。咱们制做了一个新的图标，制做方法跟上一篇文章同样，同时还须要一张透明的，一共三张。

核心代码以下，有须要的还能够加上任务栏闪烁，这里只举一个简单的例子，没有和具体业务相关联，直接写在菜单的click事件里了，实际上应该是用ipc通知，而后封装起来作的。

实际效果：

{
            label: '托盘闪烁',
            click: function () {
                // 判断若是上一个定时器是否执行完
                if(flashTrayTimer) {
                    return
                }

                // 任务栏闪烁
                // if (!mainWindow.isFocused()) {
                //     mainWindow.showInactive();
                //     mainWindow.flashFrame(true);
                // }

                //系统托盘图标闪烁
                appTray.setImage(`${__static}/iconMessage.ico`)
                let count = 0;
                flashTrayTimer = setInterval(function () {
                    count++;
                    if (count % 2 == 0) {
                        appTray.setImage(`${__static}/iconTransparent.ico`)
                    } else {
                        appTray.setImage(`${__static}/iconMessage.ico`)
                    }
                }, 600);
            }
        },

点击托盘显示主窗口的时候就要把定时器清理掉，而且还原图标。

// 主窗口显示隐藏切换
    appTray.on('click', () => {
        // 清楚图标闪烁定时器
        clearInterval(flashTrayTimer)
        flashTrayTimer = null
        // 还原图标
        appTray.setImage(`${__static}/icon.ico`)
        mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show()
    })