「Electron跨平台桌面应用开发_4」系统托盘功

本章主要内容
1.优化程序，解决启动白屏得问题
2.添加系统托盘功能

一、优化程序，解决启动白屏问题

现在，当我们在启动Electron应用时会发现应用会有一会儿只有带白屏得窗口，而正式得内容（这里是网页index.html）才会加载进窗口。这时，我们可以在创建窗口得时候先不让其显示，等网页加载完后我们再显示窗口。

1.修改 main.js

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

function 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。

现在我们可以看到，应用显示得时候我们得网页也展示了，已经看不到白屏。

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 tray = new Tray(iconPath); tray.setToolTip('这是electron应用！');}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 { Tray } = require("electron");let appTray = null;const tray = (icon) => { appTray = new Tray(icon); appTray.setToolTip('这是electron应用！');}module.exports = tray;4.修改 main.js

const { app, BrowserWindow, Menu} = require('electron');const menu = require('./menu');const path = require('path');const tray = require('./tray'); // 导入tray模块let iconPath = path.join(__dirname, 'public/favicon.ico'); // 托盘图标得地址let mainWindow = null;function 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); tray(iconPath); // 创建托盘图标 app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } });});app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); }});

再次运行程序可以看到如上面第2步一样得效果。

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

5.给托盘添加菜单

这里我们只需要修改tray.js就行了，可以参考二 自定义应用菜单 中menu.js创建菜单得方法。

const { Tray, dialog, Menu, app } = require("electron");let appTray = null;const template = [ { label: '关于electronapp', click() { dialog.showMessageBox({ message: '这是一个Electron应用！', type: 'info', title: 'electron应用' }); } }, { type: 'separator' }, { label: '退出', click() { app.quit(); } }];const contextMenu = Menu.buildFromTemplate(template);const tray = (icon) => { appTray = new Tray(icon); appTray.setToolTip('这是一个electron应用！'); appTray.setContextMenu(contextMenu);}module.exports = tray;

再次运行程序可以看到效果。

可以感谢阅读菜单看看效果。