1.前言

在windows系统中，一般的应用都会监听不同的状态，然后给出不同的提示。比如QQ的离线状态，企鹅会变灰。当网络中断时，会一直在左右摇摆，类似于等待重连，并且后台都做了重连的操作。

基于这种情况，我们的客户端也需要做这种诊断网络异常，并且给出提示，然后重新连接。

网络重连我就不在这里说明了，这个是后台设置的机制，当网络与服务端不通时，自己尝试重连，知道重新建立链接或者说是token超时，放弃链接，让用户检查网络，重新登录。

基于此，做了如下操作

调研electron的能力，尝试实现托盘徽章，用于展示当前的网络状态或者服务器异常

当网络异常时，给出用户重连的操作提示

这里主要是讲一下托盘的徽章怎么实现。

2. Eelectron托盘徽标

2.1 windows自带的图标和徽标

使用windows的时候，很容易发现它的很多应用都有徽标，比如安全，他右下角的小徽标

还比如，打开安全之后的一系列东西，都是可以加徽标的。

于是便去调研一下如何给windows应用加上徽标，在这里我们可以看到window提供的一下图标，仔细查看你会发现，很多图标上都自带有徽标，这也可能说明并不是在状态改变的时候，为图标追加了一个error或者alerm的徽标，而是这原本就是图标上自带的徽标。只不过是在状态改变的时候或者有告警错误来的时候去替换这张图片，换成自带徽标的图标。给人的一种感觉就是只改变了状态，徽标实时的跟着变化。

比如说这种网络错误

2.2 调研antdv的徽标

在使用antdv的时候，有个Brage组件，形如

但是尝试的时候发现，antdv只能在渲染进程中使用，也就是说你想要图标加上徽标，那么一定要在渲染进程中进行操作。

BUT，托盘的操作是在主进程进行的，那么是没办法去实现在托盘图标上加上徽标的，所以这个就不得不放弃了。

2.3 Eelectron徽标的支持

详见这里 electron针对徽标做了支持，但是你参考着代码写出来的效果就是，它的徽标是在任务栏的图标上追加徽标，而不是托盘中。

效果点击这里，结果我直接粘贴在下面了。

所以，这个看起来是不合适的。

2.4 定制带徽标的图标

如果使用html和css，其实分分钟都可以自己定制实现一个带徽标的图标，但是没办法，在主进程中我还不知道能不能写样式，我估摸着应该可以吧，没研究过，这里也不做说明了，感兴趣的可以自己做调研。

在这里我的方案是通过软件去定义带有徽标的图标，简单的来说就是一张图片上带有一个徽标，我会根据状态定制不同的图片，然后状态发生变化时去替换对应的图片。

首选工具是美图秀秀，因为常用，而且免费。而PS过于专业，收费而且体积庞大。只是偶尔用于开发，所以选择了美图。

2.4.1 拼图

如果想要将徽标印到对应的图标上，首先需要将两张图片进行拼接。

打开美图秀秀，选择拼图-》自由拼图

2. 点击纯色背景选择白色

3. 点击添加图片
添加两次图片，图片1是你的主图片作为图标使用，图片2是你的徽标图

4. 拖动图片二，缩小到图片1的合适位置

5. 调整图层
点击图片2，右键选择置于底层，这样就不会遮盖图片1，保证图便1的完整性

6. 点击下方的确定按钮
7. 点击最上面的抠图
以为我们通过美图生成的图片是自带白底色的，所以我们需要通过抠图，来去除底色

8. 选择自动抠图
在这个页面，可以按照左边的提示信息区修改，在主图片上划一道竖线

就会变成这种

9. 点击下面的应用效果
就可以变成无底色的图片

然后保存下来

就会生成这种带有徽标的图标，然后替换到托盘中即可。不知道你们学费了没有？

3.补充

上面也说到如果使用美图的拼图工具，则会带有底色。然后用抠图工具可以扣除大部分，但是发现有一部分没有修改过来，就是中间的!是白色的底色，这跟之前的图片有很大的出入，于是我使用美图的抠图工具，一点点的扣，发现无论你手多稳，放大的时候发现还是跟狗啃过的一样，所以不得不用PS去做处理。

用完才发现PS真的很方便去处理图片，不愧是专业级的制图工具，如果我是美工/UI设计师，我肯定会选择买专业版。只可惜我只是个前端狗，P图也只是偶尔为之，所以就搞起了七天试用。

怎么将两张图合并到一张图呢？

打开PS软件，选择文件->打开，选择你的第一张图片
选择文件->置入嵌入对象，选择第二张图片
缩放你的第二张图片，放到第一张图片的合适位置
点击右上角的对号
ctrl+s保存图片
保存图片选择png格式
然后就可以看到两个透明底色的图片融合到一个图片，而且底色也是透明的，这就比美图的白色底色简单多了。

【Eelectron-vue】构建桌面应用（17）-electron托盘图标的徽标相关推荐

使用Vue构建桌面应用程序：Vuido
我非常喜欢Vue.这是个优秀的框架,可以帮助我们搭建完美的web应用程序.但真正神奇的地方是你不仅仅可以用它搭建web应用程序,还可以使用Weex或NativeScript-Vue创建本地移动应用程序 ...
使用 Electron 构建桌面应用
作者:kmokidd 链接:https://zhuanlan.zhihu.com/p/20225295 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 译者注:前一段 ...
小满Vue3第三十九章（Vue开发桌面程序Electron）
建议视频教程小满Vue3(第三十九章 electron桌面程序)_哔哩哔哩_bilibili Electron官网Electron | Build cross-platform desktop app ...
electron 托盘图标闪烁_从零到一，用 Electron 开发桌面效率工具
Electron 已经不算新技术,最早是 github 从 Atom 编辑器衍生出来的框架.通过编写 Javascript, HTML, CSS 能快速编译出跨系统的桌面 app.Electron 的 ...
使用 AngularJS 和 Electron 构建桌面应用
使用 AngularJS 和 Electron 构建桌面应用 GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨 ...
使用 Electron 构建桌面应用程序的介绍
事实上的团队协作软件,Visual Studio Code - 在撰写本文时市场上最受欢迎的代码编辑器之一,以及WhatsApp的桌面版本都有一个共同点:它们都是用Electron构建的.js.随着这 ...
AngularJS 和 Electron 构建桌面应用
译]使用 AngularJS 和 Electron 构建桌面应用原文: Creating Desktop Applications With AngularJS and GitHub Electro ...
electron vue点击按钮关闭_electron+vue制做桌面应用--自定义标题栏最大/小化和关闭...
上一篇:electron+vue制做桌面应用--自定义标题栏中咱们介绍了如何使用electon制做自定义样式的标题栏接下来,咱们介绍一下标题栏上的最大化.最小化和关闭按钮如何实现vue 首先查阅el ...
ZEGO教程：如何通过electron构建桌面跨平台音视频应用
近年来,视频直播.短视频.在线教育.在线医疗.人工智能.以及VR等视频领域的相关行业都非常热门,成为大众瞩目的焦点.而5G网络的相继普及,移动网速飞速提升,又将引起下一轮视频应用的革命. 可以看到,在 ...

【Eelectron-vue】构建桌面应用（17）-electron托盘图标的徽标