这篇文章给大家聊聊关于《Electron跨平台桌面应用开发4》系统托盘功能，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

1.优化程序，解决启动白屏问题

现在，当我们启动Electron应用程序时，我们会发现应用程序只会有一个白屏的窗口一段时间，并且官方内容（这里是网页index.html）将被加载到窗口中。这时我们可以在创建窗口的时候阻止窗口的显示，等网页加载完成后再显示窗口。

1.修改main.js

这里我们只需要修改createWindow()方法即可：

函数createWindow () { const mainWindow=new BrowserWindow({ width: 800, height: 600, icon: path.join(__dirname, 'public/favicon.ico'), show: false }); mainWindow.loadFile('index.html') mainWindow.on('ready-to-show', ()={ mainWindow.show(); });}

2.运行命令启动应用

npm run start npm run start 相当于npm start。

现在我们可以看到，当应用程序显示出来的时候，我们的网页也显示出来了，白屏就不再可见了。

二、添加系统托盘功能

1.修改 main.js

let iconPath=path.join(__dirname, 'public/favicon.ico');function createWindow () { const mainWindow=new BrowserWindow({ width: 800, height: 600, icon: iconPath, show: false }); mainWindow.loadFile('index.html'); //等到窗口准备好显示，就不会出现白屏了mainWindow.on('ready-to-show', ()={ mainWindow.show(); });}function createTray() { const tab=new Tray(iconPath);托盘.setToolTip('这是一个电子应用程序！');}app.whenReady().then(()={ createWindow(); createTray(); app.on('activate', ()={ if (BrowserWindow.getAllWindows().length===0) { createWindow() } });});

2.运行程序

npm start 系统托盘已经显示了我们应用程序的图标。

当然，这里我们只展示如何添加系统托盘功能，而没有添加其他功能，所以我们直接修改main.js。在实际场景中，我们应用程序的系统托盘功能可能非常复杂。此时，正如我之前添加菜单时提到的，为系统托盘功能创建单独的文件始终是最佳实践。否则，我们的main.js最终会变得臃肿且不方便维护。

3.新建tray.js文件

const { 托盘}=require('电子');让appTray=null;const 托盘=(icon)={ appTray=new Tray(icon); appTray.setToolTip('这是一个电子应用程序！');}module.exports=托盘；

4.修改 main.js

const { app, BrowserWindow, Menu}=require(' Electron'); const menu=require('./menu'); const path=require('path'); const托盘=require('./tray'); //导入托盘模块let iconPath=path.join(__dirname, 'public/favicon.ico'); //托盘图标的地址let mainWindow=null;函数createWindow () { mainWindow=new BrowserWindow({ width: 800, height: 600, icon: iconPath, show: false }); mainWindow.loadFile('index.html') mainWindow.on('ready-to-show', ()={ mainWindow.show(); });}app.on('ready', ()={ createWindow(); Menu.setApplicationMenu(menu);托盘(iconPath); //创建托盘图标app.on('activate', ()={ if (BrowserWindow.getAllWindows().length===0) { createWindow() } });});app.on('window-all-close', ()={ if (process.platform !=='darwin') { app.quit(); }});再次运行程序，可以看到与上面步骤2 相同的效果。

接下来我们可以在tray.js中修改添加我们想要的功能。这里我们以添加菜单为例。

5. 将菜单添加到托盘

这里我们只需要修改tray.js即可。可以参考2自定义应用菜单中menu.js中创建菜单的方法。

const { Tray,dialog,Menu,app }=require(' Electron');let appTray=null;const template=[ { label: '关于electroapp', click() {dialog.showMessageBox({ message: '这是一个Electron 应用程序！', type: 'info', title: ' Electron 应用程序' }); } }, { type: '分隔符' }, { label: '退出', click() { app.quit(); } }];const contextMenu=Menu.buildFromTemplate(template);const 托盘=(图标)={ appTray=new Tray(icon); appTray.setToolTip('这是一个电子应用程序！'); appTray.setContextMenu(contextMenu);}module.exports=托盘；再次运行程序看看效果。