electron程序，mac系统设置托盘模版图标的最佳实践

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

大家好，苏南大叔继续说electron图标的事情。本文介绍的内容，还是mac专属的内容，其它操作系统的小伙伴，基本上可以不用看了。具体上来说，就是mac的外观自适应托盘图片的事情。苏南大叔个人不是太喜欢这个黑白的图标。不过，这个是人家苹果的规范，大家执行就对了。

本文测试环境：mac@mojave，electron@6.0.0。

前言

本文说的操作系统还是mac@mojave，因为目前就它有个系统外观切换的概念。而electron托盘模版图片，就是建立在系统外观切换的概念的基础上的。所以，老规矩，请记得检测是否为mac系统。

if (process.platform == 'darwin') {
  //mac
}

另外，设置图片的基本方法如下，这个是基本的概念。

// const {app, Tray} = require('electron')
// const path = require('path');
let tray = null
app.on('ready', () => {
  tray = new Tray(path.join(__dirname,"./tray.png"));
})

前置阅读文章是：

• https://newsn.net/say/electron-tray-ico.html

图标的尺寸，最合适的尺寸是16*16。

方案一，修改文件名称xxxTemplate

这个方案在前面的文章中，苏南大叔已经有所提及，方案非常的简单。就是把用作图标的图片文件，进行重命名。以Template结尾即可。当然涉及到@2x，@3x之类的也是支持的。例如：

• xxxTemplate.png
• xxxTemplate@2x.png
• xxxTemplate@3x.png
• ...

// const {app, Tray} = require('electron')
// const path = require('path');
let tray = null
app.on('ready', () => {
  tray = new Tray(path.join(__dirname,"xxxTemplate.png"));
})

具体可以参见：

• https://newsn.net/say/electron-tray-ico-name.html

方案二，setTemplateImage(true)

在第二个方案中，图标文件的名称就不必命名为Template了。而是利用代码的方式，将对应的图片识别为模版图片的。例如：

一句话setTemplateImage(true)，就把图标从彩色变成了黑白，自适应系统外观的黑白图标...

结束语

本文中，苏南大叔描述的是mac专业的托盘模版图片的设置方式。这个方案因为出来的图片是黑白色的，苏南大叔不是太喜欢。但是，这样出来的效果和系统其它的托盘图标是很统一的风格。所以，还是那句话，各取所需哦。

更多苏南大叔的electron相关文章，请点击苏南大叔的博客：

• https://newsn.net/tag/electron/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。