如何使用Electron实现一个托盘功能

前面的话

我们身边有很多应用点击关闭按钮时，并不会真正的退出，而是隐藏到托盘。这篇文章介绍如何使用Electron实现一个托盘功能。

如何创建

当主进程监听关闭事件时，这时我们就可以开启托盘功能。我们需要使用Electron的两个模块Menu与Tray

const electron = require('electron');
const Menu = electron.Menu;
const Tray = electron.Tray;

托盘完整代码（tray.js）：

const electron = require('electron');
const ipcMain = electron.ipcMain;
const path = require('path');
const Menu = electron.Menu;
const Tray = electron.Tray;

let mainWindow = null;
let appTray = null; // 托盘实例


// 隐藏主窗口，并创建托盘
function setTray() {
    // 当托盘最小化时，右击有一个菜单显示，这里进设置一个退出的菜单
    let trayMenuTemplate = [{ // 系统托盘图标目录
        label: '退出',
        click: function() {
            app.quit(); // 点击之后退出应用
        }
    }];
    // 创建托盘实例
    let iconPath = path.join(__dirname,'app.png');
    appTray = new Tray(iconPath);
    // 图标的上下文菜单
    const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
    
    // 隐藏主窗口
    mainWindow.hide();
    // 设置托盘悬浮提示
    appTray.setToolTip('notePad');
    // 设置托盘菜单
    appTray.setContextMenu(contextMenu);
    // 单机托盘小图标显示应用
    appTray.on('click', function() {
        // 显示主程序
        mainWindow.show();
        // 关闭托盘显示
        appTray.destroy();
    });
}

// 主进程监听打开托盘事件
ipcMain.on('open-tray', ()=>{
    setTray();
})

module.exports = function (main){
    mainWindow = main;
}

代码最后，暴露出了一个函数，我们在主进程直接使用就行（这里只给出主进程的一部分代码）：

// 引入创建托盘函数
let tray = require('./tray');
function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    // 隐藏默认窗口框
    // frame: false
  })

  mainWindow.loadURL(winURL)

   // 注册esc，用来关闭眼保的遮挡框
   globalShortcut.register('Esc', function () {
    // 关闭眼保
    closeEye();
  })
  // 直接调用暴露出的tray函数
  tray(mainWindow);
  mainWindow.on('closed', () => {
    mainWindow = null
  })

}

封装好的tray.js在任何项目中都可以哪来使用。