前面的话
我们身边有很多应用点击关闭按钮时,并不会真正的退出,而是隐藏到托盘。这篇文章介绍如何使用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
在任何项目中都可以哪来使用。