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

本文描述的是electron中的tray图标,在mac系统中的特殊应用。说它特殊,就是因为图标文件的名字会影响electron程序的表现。本文中描述的就是这种差异,本文的内容是以macbook promac系统为基础的。截至到发稿来说,window系统上,暂时没有类似的效果。

苏南大叔:electron程序,mac系统tray图标文件的特殊命名规范 - elctron-tray-ico-name
electron程序,mac系统tray图标文件的特殊命名规范(图7-1)

本文测试环境:macbook promac@mojave系统,electron@6.0.0。龙套是electron-quick-start项目。

基础代码

基础代码是:

app.on('ready', () => {
  tray = new Tray(path.join(__dirname,"<ico_file_name>"));
})

本文中就是重点描述<ico_file_name>的,请自行根据需求替换相关文本。另外,在mac系统中,最基本的图标尺寸是16*16@2x就是32*32

苏南大叔:electron程序,mac系统tray图标文件的特殊命名规范 - elctron-tray-ico-name-code
electron程序,mac系统tray图标文件的特殊命名规范(图7-2)

视网膜屏幕(@2x)

因为macbook pro电脑上搭载的是视网膜屏幕,当然了到底怎么个视网膜法,苏南大叔也是不知道的。最直观的感受就是:比苏南大叔的macbook air屏幕清晰的多。

那么,对于tray图标来说,如果代码里面写的是tray.png的话。那么在高分辨率情况下,程序可以自动识别tray@2x.png文件。高DPI的屏幕下,自动识别@2x,@3x图标文件。在苏南大叔的测试中,mbp首先识别到的是@2x文件。当@2x文件不存在的时候,尝试识别到了@3x文件

  • 命名上的组合就是tray@2x.png
  • 代码上的编写则是tray.png

苏南大叔:electron程序,mac系统tray图标文件的特殊命名规范 - electron-ico-name-2x
electron程序,mac系统tray图标文件的特殊命名规范(图7-3)

适应不同的系统皮肤(xxxTemplate)

这个特性就要提及mac@mojave系统了,因为mojave这个版本的mac系统,提出了系统外观的概念。通俗的说,就是软件的系统皮肤,有lightdark两种情况。那么,对于图标文件来说,以Template为名称结尾的时候,就会自动触发自适应的黑白图标模式。图标本身是彩色的没有关系,electron会强制换成白加黑或者黑加白的图标。因为.png文件支持透明,所以,推荐的命名是:xxxTemplate.png,请自行替换xxx字样。

  • 命名上的组合就是xxxTemplate.png
  • 代码上的编写也是xxxTemplate.png

苏南大叔:electron程序,mac系统tray图标文件的特殊命名规范 - electron-ico-name-template
electron程序,mac系统tray图标文件的特殊命名规范(图7-4)

苏南大叔:electron程序,mac系统tray图标文件的特殊命名规范 - electron-ico-name-template2
electron程序,mac系统tray图标文件的特殊命名规范(图7-5)

可以在mac系统的"系统偏好设置"的"通用"中,修改lightdark外观模式。如下图所示:

苏南大叔:electron程序,mac系统tray图标文件的特殊命名规范 - switch-mode
electron程序,mac系统tray图标文件的特殊命名规范(图7-6)

系统皮肤+视网膜屏幕(Template@2x)

这条技巧就是上述两条的合集,即支持硬件层面上的高分辨率,又支持软件层面上的lightdark模式。

  • 命名上的组合就是xxxTemplate@2x.png
  • 代码上的编写就是xxxTemplate.png

苏南大叔:electron程序,mac系统tray图标文件的特殊命名规范 - electron-ico-name-template-2x
electron程序,mac系统tray图标文件的特殊命名规范(图7-7)

总结

需要特殊说明的是:就目前苏南大叔的实验结果来看,使用Template命名的话,就会得到一个黑白的图标。否则就可以保持原有的图标颜色。这个,是否是您所想要的效果呢?

本文中,苏南大叔描述的都是在mac系统下的mbp上的特殊情况,当然,不排除有其它的机型也会遵守本文中的tray图标的特殊命名规范。如果您还知道哪个机型符合这个命名规范的话,欢迎留言给苏南大叔。

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   electron