【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、 簡書、 開源中國、 博客園帳號。