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

Electron开发实战之记账软件6——自定义系统托盘菜单、闪烁_第1张图片

关闭最小化到托盘

上一篇我们自定义了关闭最大和最小化按钮,但是发现点击关闭后直接就关了,我们想要的是关闭后只是隐藏,点击托盘还能显示,常规需求。原理是监听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)

托盘图标闪烁

闪烁的原理就是图片替换而已,做的简单点就是两张图片,做的复杂点就是根据不同的业务显示不同的图标。我们制作了一个新的图标,制作方法跟上一篇文章一样,同时还需要一张透明的,一共三张。 Electron开发实战之记账软件6——自定义系统托盘菜单、闪烁_第2张图片Electron开发实战之记账软件6——自定义系统托盘菜单、闪烁_第3张图片

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

实际效果: Electron开发实战之记账软件6——自定义系统托盘菜单、闪烁_第4张图片

{
            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也可以。

Electron开发实战之记账软件6——自定义系统托盘菜单、闪烁_第5张图片

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

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

你可能感兴趣的:(Electron开发实战之记账软件6——自定义系统托盘菜单、闪烁)