electron ant-design-vue 不能用_【Electron-Playground系列】托盘篇

作者：梁棒棒
electron-playground 地址：tal-tech/electron-playground

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

1. 创建托盘

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

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

代码也很简单：

const

一个系统托盘就会被创建出来。很简单对不对，但是这个图标现在还没有任何功能，接下来我们为图标添加一些属性和事件。

2. 设置托盘属性

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

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

先看下效果图：

附上代码：

const

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

上面我们设置了托盘根据系统主题显示不同的图标，但是系统主题是动态的，又该怎么做呢，请看：

nativeTheme

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

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

3. 示例

简单列举几个示例。

显示未读消息数(macOS)

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

效果是这样的：

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

在windows下，可通过setImage设置正常图标与空图标切换达到闪动效果。在mac系统下空图标不占用图标空间，所以需要设置透明图标。 你可以在用darkIcon代替()然后执行看一下效果。

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

windows下效果：

附代码：

const

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

windows下效果：

附代码：

const

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

项目的地址传送门：

​

为了能更好学习electron，我们目前创作了一个系列，有兴趣可以看看

晓黑板前端技术：【Electron-Playground系列】菜单篇​

晓黑板前端技术：【Electron-Playground系列】托盘篇​

晓黑板前端技术：【Electron-Playground系列】自定义协议篇​

晓黑板前端技术：【Electron-Playground系列】Dialog与文件选择篇​

如果想看更完整的文档，请参考下面文档

electron-playground文档 · 语雀​