Electron 實現最小化到托盤

原生實現 Electron 實現最小化到托盤。

package.json

{
    "name": "electron-tray",
    "version": "1.0.0",
    "description": "",
    "main": "electron.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "electron ."
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "electron": "^13.1.6"
    }
}

electron.js

/*
 * @Author: Yogile
 * @Gitee: https://gitee.com/yogile
 * @Date: 2021-07-15 19:13:44
 * @LastEditors: Yogile
 * @LastEditTime: 2021-07-16 13:12:58
 * @Description: 
 */
const electron = require('electron');
const { app, Menu, Tray } = electron;
const { BrowserWindow } = electron;
const path = require('path');

let win;
let tray = null

function createWindow() {
    // 創建窗口並加載頁面
    win = new BrowserWindow({ width: 800, height: 600, icon: path.join(__dirname, 'yogile-site.ico') });
    win.loadURL(`file://${__dirname}/index.html`);

    // 打開窗口的調試工具
    win.webContents.openDevTools();

    // 關閉默認菜單
    win.setMenu(null);

    // 窗口關閉的監聽  
    win.on('closed', (event) => {
        win = null;
    });
    // 觸發關閉時觸發
    win.on('close', (event) => {
        // 截獲 close 默認行為
        event.preventDefault();
        // 點擊關閉時觸發close事件，我們按照之前的思路在關閉時，隱藏窗口，隱藏任務欄窗口
        win.hide();
        win.setSkipTaskbar(true);

    });
    // 觸發顯示時觸發
    win.on('show', () => {});
    // 觸發隱藏時觸發
    win.on('hide', () => {});

    // 新建托盤
    tray = new Tray(path.join(__dirname, 'icon.ico'));
    // 托盤名稱
    tray.setToolTip('Electron Tray');
    // 托盤菜單
    const contextMenu = Menu.buildFromTemplate([{
            label: '顯示',
            click: () => { win.show() }
        },
        {
            label: '退出',
            click: () => { win.destroy() }
        }
    ]);
    // 載入托盤菜單
    tray.setContextMenu(contextMenu);
    // 雙擊觸發
    tray.on('double-click', () => {
        // 雙擊通知區圖標實現應用的顯示或隱藏
        win.isVisible() ? win.hide() : win.show()
        win.isVisible() ? win.setSkipTaskbar(false) : win.setSkipTaskbar(true);
    });
}

app.on('ready', createWindow);
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

// 當窗口開始活動時觸發
app.on('activate', () => {
    if (win === null) {
        createWindow();
    }
});