【Electron Playground 系列】托盘篇

做者： 梁棒棒

托盘虽小，做用不小。它是你的应用正在操做系统运行的标识，它能够通知你有新消息，能够唤醒应用界面，能够设置上下文（右键）菜单设置更多的功能等。下面咱们就来一一实现这些功能，要在主进程进行操做。

1. 建立托盘

首先来建立一个托盘图标，简单三步便可：

1. 从electron库引入Tray类
2. 获取图标地址
3. 实例化Tray并传入图标地址

代码也很简单：

const { Tray } = require('electron')
const path = require('path')

const icon = path.join(__dirname, '你的图片路径')
new Tray(icon)

一个系统托盘就会被建立出来。很简单对不对，可是这个图标如今尚未任何功能，接下来咱们为图标添加一些属性和事件。

2. 设置托盘属性

为tray实例设置一些属性和事件，包括上下文菜单、鼠标移入文字。详细文档点击这里。

这里咱们为tray设置灵活图标，让它能够根据系统主题显示不一样的图标；再设置一个鼠标移入图标的时候会显示的提示文字，最后为它设置上下文菜单，让它能够具有一些功能。

先看下效果图：

附上代码：

const { Tray, Menu, nativeTheme, BrowserWindow } = require('electron')
const path = require('path')

let tray

// 设置顶部APP图标的操做和图标
const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')
const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')

// 根据系统主题显示不一样的主题图标
tray = new Tray(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon)

tray.setToolTip('Electron-Playground')

const contextMenu = Menu.buildFromTemplate([
  {
    label: '打开新窗口',
    click: () => {
      let child = new BrowserWindow({ parent: BrowserWindow.getFocusedWindow() })
      child.loadURL('https://electronjs.org')
      child.show()
    },
  },
  {
    label: '删除图标',
    click: () => {
      tray.destroy()
    },
  },
])

// 设置上下文菜单
tray.setContextMenu(contextMenu)

想亲自试一试的话点electron-playground。而后继续：

上面咱们设置了托盘根据系统主题显示不一样的图标，可是系统主题是动态的，又该怎么作呢，请看：

nativeTheme.on('updated', () => {
  tray.setImage(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon)
})

添加一个主题监听事件就行了。

更多的属性、事件和方法列表请看官方文档。

3. 示例

简单列举几个示例。

3.1 显示未读消息数(macOS)

在macOS系统下，能够采用setTitle(String)设置未读消息数。PS：windows下无效果。

tray.setTitle("1")

效果是这样的：

3.2 有未读消息时图标闪动(windows)

在windows下，可经过setImage设置正常图标与空图标切换达到闪动效果。在mac系统下空图标不占用图标空间，因此须要设置透明图标。
你能够在用darkIcon代替nativeImage.createEmpty()而后执行看一下效果。

如何判断操做系统平台，点击这里

windows下效果：

附代码：

const { Tray, Menu, BrowserWindow, nativeImage } = require('electron')
const path = require('path')

let tray
let timer
let toggle = true
let haveMessage = true

const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')
const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')

const win = BrowserWindow.getFocusedWindow();

tray = new Tray(lightIcon)

const contextMenu = Menu.buildFromTemplate([
  {
    label: '张三的消息',
    click: () => {
      let child = new BrowserWindow({ parent: BrowserWindow.getFocusedWindow() })
      child.loadURL('https://electronjs.org')
      child.show()
    },
  },
  { type: 'separator' },
  {
    label: '删除图标',
    click: () => {
      tray.destroy()
      clearInterval(timer)
    },
  },
])

tray.setContextMenu(contextMenu)

tray.setToolTip('Electron-Playground')

if (haveMessage) {
  timer = setInterval(() => {
    toggle = !toggle
    if (toggle) {
      tray.setImage(nativeImage.createEmpty())
    } else {
      tray.setImage(lightIcon)
    }
  }, 600)
}

3.3 双击托盘显示隐藏界面(windows)

windows下效果：

附代码：

const { Tray, BrowserWindow } = require('electron')
const path = require('path')

let tray

const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')

const win = BrowserWindow.getFocusedWindow()

tray = new Tray(lightIcon)

tray.on('double-click', () => {
  win.isVisible() ? win.hide() : win.show()
})

注：此效果在windows上良好，在mac下会有些问题，双击事件可能会失效，实际使用过程当中要注意，不过mac下通常也不会用到这个事件。

咱们是晓黑板前端，欢迎关注咱们的 知乎、 Segmentfault、 CSDN、 简书、 开源中国、 博客园帐号。