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