【Electron】应用程序驻留系统托盘

在上一篇文章《【Electron】第一个用 Electron 开发的桌面应用程序》 我们实现了一个非常简单的应用程序。但是,一个完备的应用程序必须具备驻留系统托盘的功能。

本篇文章我们将使用 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

博主 2011 年创建了一个《PHP 初学者官方群》,目前群成员 500 人左右。群号:168159147。为了防止广告,设置为付费入群。欢迎大家加入讨论技术!

标签: 无

发表评论: