大家好,苏南大叔继续说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

方案二,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相关文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

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

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

本站的忠实读者小伙伴,正在阅读下面这些文章: