在上一篇文章[《【Electron】第一个用 Electron 开发的桌面应用程序》][1] 我们实现了一个非常简单的应用程序。但是，一个完备的应用程序必须具备驻留系统托盘的功能。
本篇文章我们将使用 Electron 实现应用程序图标驻留系统托盘。
我们对上一例中的 index.js 文件更改如下：
const {app, Menu, Tray, BrowserWindow} = require('electron')
const path = require('path');
var appTray = null;
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
resizable: true,
title: '将应用程序添加至系统托盘',
skipTaskbar:false,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
// 系统托盘右键菜单
var trayMenuTemplate = [
{
label: '设置',
click: function () {} //打开相应页面
},
{
label: '意见反馈',
click: function () {}
},
{
label: '帮助',
click: function () {}
},
{
label: '关于我们',
click: function () {}
},
{
label: '退出',
click: function () {
app.quit();
}
}
];
// 系统托盘图标目录
trayIconDir = path.join(__dirname, 'images/icons');
trayIcon = path.join(trayIconDir, 'app.ico')
appTray = new Tray(trayIcon);
// 图标的上下文菜单
const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
// 设置此托盘图标的悬停提示内容
appTray.setToolTip('This is my application.');
// 设置此图标的上下文菜单
appTray.setContextMenu(contextMenu);
}
app.on('ready', createWindow);
app.on('window-all-closed', function() {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
运行起来依然是：
> npm start
此时我们会在 windows 系统托盘看到我们设置的 ico，以及右键会弹出菜单。
1）ico 图片
我们需要找到一个 ico 图片。千万不能用网络上的 jpg、png 等格式来做 ico 图标。刚开始博主就是随机在网络上找了一张 png 的图片做更改扩展名 .ico 来做托盘图标。结果提示我 ico 图片格式不对。所以，大家一定不能踩这个坑了。
trayIconDir = path.join(__dirname, 'images/icons');
trayIcon = path.join(trayIconDir, 'app.ico')
appTray = new Tray(trayIcon);
上面第1、2行代码，是读取我们放在根目录下的 images/icons 目录下的 app.ico 图标。
第 3 行代码我们设置系统托盘图标。
2）右键托盘图标弹出菜单
但凡一个成熟的桌面应用都会右键弹出一系列功能菜单。如果做桌面应用没有这个功能，就像炒菜没放盐一样索然无味。
// 系统托盘右键菜单
var trayMenuTemplate = [
{
label: '设置',
click: function () {} //打开相应页面
},
{
label: '意见反馈',
click: function () {}
},
{
label: '帮助',
click: function () {}
},
{
label: '关于我们',
click: function () {}
},
{
label: '退出',
click: function () {
app.quit();
}
}];
// 图标的上下文菜单
const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
// 设置此托盘图标的悬停提示内容
appTray.setToolTip('This is my application.');
// 设置此图标的上下文菜单
appTray.setContextMenu(contextMenu);
上面我们准备一个定义一个对象：trayMenuTemplate。再通过下面的几行代码设置了右键弹出式菜单。在这个对象之中可以设置菜单名称、点击菜单之后响应的动作。上面我们的 click:function(){...} 需要自己实现里面点击之后应该运行的业务代码。
上在面我们实现了点击“退出”菜单关闭整个应用并退出系统托盘的功能。
3）其他
上这个示例之中我们实现相当的简单：
- 应用图标驻留系统托盘
- 右键托盘应用图标弹出功能菜单
- 点击“退出”退出应用程序
后续还会讲解右键托盘更高级的功能：
- 设置弹出菜单每一项的 ico 图标。
- 托盘 ico 图标闪烁（如：微信新消息时的闪烁）
- 闪烁音频（如：微信新消息时的提示音）
- 右键菜单弹出多级功能菜单。
在后续我们会把这些高级的功能全部实现。本篇文章是让您更快实现系统托盘驻留。
系统托盘扩展知识文档：https://www.electronjs.org/docs/api/tray