本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、前言

对于桌面应用来说，在系统中我们希望经常希望它一直存在，但并不需要一直在屏幕中显示，即后台运行。当我们需要的时候，只需要从系统托盘中，将其唤起即可。对于系统托盘，我们通常用来唤起应用、通知消息、退出等功能。

接下来我们就来介绍electron应用如何设置系统托盘。

二、实施方案

在electron的官方文档中，已经给出了关于系统托盘的模块，具体看electron官方文档Tray相关内容。

接下来我们一一介绍关于系统托盘的功能实现

1.系统托盘图标的初始化

import { Tray } from 'electron'
let iconPathWin = 'windows托盘图标路径'
let iconPathMac = 'mac系统托盘图标路径'
let isMac = process.platform === 'darwin' // 判断当前系统是否为mac系统
let tray = new Tray(isMac ? iconPathMac : iconPathWin )

这里我们在初始化的时候，要根据不同系统显示对应的图标，一般情况下，windows系统的图标都是彩色的，而mac系统的图标都是白色的。

2.系统托盘图标增加菜单

import { Menu } from 'electron'
// 这里需要用到Menu模块创建菜单
const contextMenu = Menu.buildFromTemplate([
    // 比如这里添加一个退出功能
    { label: '退出', click: () => { app.quit() } } 
])
tray.setContextMenu(contextMenu)
// 这里设置鼠标浮到图标上的tips
tray.setToolTip('我的超级应用')

3.windows系统托盘图标闪烁

let timer = null
let count = 0
let iconPathWin = '应用图标路径'
let iconPathEmpty = '透明图的路径'
ipcMain.on('needIconTwinkle', (event) => { // 监听需要图标闪烁的事件
    if (!timer) {
        timer = setInterval(() => {
          count++
          if (count % 2 === 0) {
            tray.setImage(iconPathEmpty)
          } else {
            tray.setImage(iconPath)
          }
        }, 500)
    }
})

在做这部分需求，还有几个点跟大家讲一下。

当windows系统来消息的时候，我们单单使用图标闪烁来提醒用户不太明显，所以我们可以让应用在任务栏中的状态由静默转为闪烁，这样用户就能更快的注意到。（当然，这需要用户窗口是最小化，而不是完全隐藏）我们只需要在闪烁的同时加入这行代码即可。

// win为当前窗口实例
win.flashFrame(true)

当macOS系统需要通知用户有消息来时，我们一般都使用系统的Notification模块，但如果用户没有看到这些通知，恰巧这段时间不在电脑旁，我们该如何提示用户有消息呢？对于mac系统我们有两种方式通知。如下

// 在mac的系统托盘图标旁显示我们要通知消息的内容，比如数量 '1','2'...
tray.setTitle('1')
// ======= or ========
import { app } from 'electron'
// mac系统的程序坞图标上显示徽标的方式
app.dock.setBadge('1')

以上两种方法可以同时使用，但要注意，这个方法只接收String类型的。

4.托盘图标的点击事件

tray.on('click', () => {
    if (isMac) { // mac
      win.show()  // 点击图标时候，我们就让窗口显示
    } else {
      if (timer) { // 判断图标如果正在闪烁
        clearInterval(timer) // 停止闪烁
        timer = null // 定时器实例设置为空
        tray.setImage(iconPathWin) // 重新设置图标
        win.show() // 显示窗口
      } else {
        // 判断窗口是否在隐藏，隐藏的话就显示；在显示的话就隐藏
        win.isVisible() ? win.hide() : win.show()
      }
    }
})

以上，就是我们在开发electron应用的时候需要设置系统托盘的内容。

三、后记

这里给大家详细说一下，mac系统图标为什么底色要设置成白色的。

在electron官网中，有这样一段描述

MacOS

Icons passed to the Tray constructor should be Template Images.
To make sure your icon isn't grainy on retina monitors, be sure your @2x image is 144dpi.
If you are bundling your application (e.g., with webpack for development), be sure that the file names are not being mangled or hashed. The filename needs to end in Template, and the @2x image needs to have the same filename as the standard image, or MacOS will not magically invert your image's colors or use the high density image.
16x16 (72dpi) and 32x32@2x (144dpi) work well for most icons.

Windows

It is recommended to use ICO icons to get best visual effects.

这里挑选重点给大家说一下。

macOS系统的图标建议图片名称结尾加上Template，并且最好使用@2x的图片。首先第一个事情加上Template是为了让咱们得图标能够跟随系统的壁纸是深色还是浅色，自动将你的图标背景色改变成反色，凸显图标。第二个最好使用@2x的图片，是为了让图片更好的适应mac的视网膜屏，使图标看起来更加的清晰。最后就是咱们mac系统图标，最好使用白底镂空设计的。综上，mac系统的图片文件名设置成***Template@2x.png这样形式的就好了。

windows系统的托盘图标，electron官方建议使用ICO格式的图片文件。

感谢观看，希望能帮助到你。

【Electron】vue+electron应用设置系统托盘Tray