最近学习了下electron，需要实现一个托盘功能，下面是我的实现，如果有更好的实现方法，希望大佬指正下 下面是项目地址:码云项目地址 我们首先要了解一下托盘功能，只有了解了托盘才能更好地写代码实现它。 1.首先我们需要我们的的桌面程序在右下角也就是系统通知区添加图标和上下文菜单，这部分我们可以用Tray部分的API实现：官网Tray方面的API 2.其次我们现在可以实现下方系统通知区的功能，但需要在点关闭的时候把window隐藏起来，并且任务栏也一并需要隐藏，在点击系统通知区的图标时再把界面显示出来，这部分代码我们可以通过BrowserWindow的一些事件钩子来实现BrowserWindow官网API
梳理里思路后我直接贴出我的代码，再结合代码一点点看之前所说的实现方法
main.js的代码
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, 'icon.ico')}); win.loadURL(`file://${__dirname}/index.html`); // 打开窗口的调试工具 win.webContents.openDevTools(); win.setMenu(null) // 窗口关闭的监听 win.on('closed', (event) => { win = null; }); // 当我们点击关闭时触发close事件，我们按照之前的思路在关闭时，隐藏窗口，隐藏任务栏窗口 // event.preventDefault(); 禁止关闭行为(非常必要，因为我们并不是想要关闭窗口，所以需要禁止默认行为) win.on('close', (event) => { win.hide(); win.setSkipTaskbar(true); event.preventDefault(); }); win.on('show', () => { tray.setHighlightMode('always') }) win.on('hide', () => { tray.setHighlightMode('never') }) //创建系统通知区菜单 tray = new Tray(path.join(__dirname, 'icon.ico')); const contextMenu = Menu.buildFromTemplate([ {label: '退出', click: () => {win.destroy()}},//我们需要在这里有一个真正的退出（这里直接强制退出） ]) tray.setToolTip('My托盘测试') tray.setContextMenu(contextMenu) tray.on('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(); } });这样我们就实现了一个比较基础的托盘功能
