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