乐趣区

关于html: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、简书、开源中国、博客园账号。

退出移动版