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

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

苏南大叔:electron程序,mac系统设置托盘模版图标的最佳实践 - electron-tray-template
electron程序,mac系统设置托盘模版图标的最佳实践(图3-1)

本文测试环境:mac@mojaveelectron@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"));
})

前置阅读文章是:

图标的尺寸,最合适的尺寸是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"));
})

具体可以参见:

方案二,setTemplateImage(true)

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

newsn.net:这里是【评论】可见内容

苏南大叔:electron程序,mac系统设置托盘模版图标的最佳实践 - electron-tray-template-code
electron程序,mac系统设置托盘模版图标的最佳实践(图3-2)

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

苏南大叔:electron程序,mac系统设置托盘模版图标的最佳实践 - electron-tray-template-code2
electron程序,mac系统设置托盘模版图标的最佳实践(图3-3)

结束语

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

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

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

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

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

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