当我们在无边框下使用关闭按钮时,我们可能并不是想关闭应用,而只想他最小化在托盘中,随时等待唤醒,还好,electron依旧给我们提供了这个功能。
一、主进程
主进程中监听窗口关闭事件,在这,我们需要使用到electron的menu模块来创建菜单以及tray托盘模块。
const electron = require('electron'); const Menu = electron.Menu; const Tray = electron.Tray;
当托盘最小化后,右击时是有个菜单显示的,此处仅创建一个含有退出的菜单,
let trayMenuTemplate = [{//系统托盘图标目录 label:'退出', click: function () { app.quit(); } }];
leticonPath=path.join(__dirname, 'app.png'); appTray = new Tray(iconPath); const contextMenu = Menu.buildFromTemplate(trayMenuTemplate); // 设置托盘悬浮提示 appTray.setToolTip('never forget'); // 设置托盘菜单 appTray.setContextMenu(contextMenu);
当我们左键托盘时,是需要显示应用的,所以再增加个点击事件就完工啦。
appTray.on('click', function(){ // 显示主程序 mainWindow.show(); // 关闭托盘显示 appTray.destroy(); });
附上托盘的整个代码。
const electron = require('electron'); let appTray = null; // 引用放外部,防止被当垃圾回收 // 隐藏主窗口,并创建托盘,绑定关闭事件 function setTray () { // 用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 // ,通常被添加到一个 context menu 上. const Menu = electron.Menu; const Tray = electron.Tray; // 系统托盘右键菜单 let trayMenuTemplate = [{ // 系统托盘图标目录 label: '退出', click: function () { app.quit(); } }]; // 当前目录下的app.ico图标 let iconPath = path.join(__dirname, 'app.png'); appTray = newTray(iconPath); // 图标的上下文菜单 const contextMenu = Menu.buildFromTemplate(trayMenuTemplate); // 隐藏主窗口 mainWindow.hide(); // 设置托盘悬浮提示 appTray.setToolTip('never forget'); // 设置托盘菜单 appTray.setContextMenu(contextMenu); // 单击托盘小图标显示应用 appTray.on('click', function(){ // 显示主程序 mainWindow.show(); // 关闭托盘显示 appTray.destroy(); }); };