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()
    })

Mac下的托盘图标

mac下是不能用ico格式的图标的，所以你需要png格式图标，一般来说都是制作多个分辨率图标，我下面这几个图标尺寸为16 * 16，32 * 32，48 * 48，我显示屏是24寸，实际使用的是16尺寸的图标。相应的代码也需要更改了，当然你所有平台都使用png也可以。

下面链接是官方介绍： https://electronjs.org/docs/api/native-image

转载于:https://my.oschina.net/u/3667677/blog/3041851