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

本文中,苏南大叔讲述:tray托盘图标问题。因为大量新人还是卡住这里,所以,这里苏南大叔再次做个说明总结。本文的内容主要分为两部分,第一是图标的格式是什么?第二是图标文件要放在什么位置。解决了这两个问题,就解决了Error processing argument at index 0的报错问题了。

苏南大叔:electron程序,tray托盘图标文件需要什么格式尺寸及位置? - electron-tray-ico
electron程序,tray托盘图标文件需要什么格式尺寸及位置?(图7-1)

本文测试环境:win10/electron@5.0.7。注意点就两个,一是格式(一般人不会犯错),二是位置(一般人都是这里出错了)。加油,少年!

图标的格式

首先要解决图标格式的问题,大家在这里总是傻傻的不清楚。其实,electron中图标文件的格式使用,还是非常宽松的,常见的.png/.jpg格式都是可以使用的,甚至大家可以拿为app单独做的.ico/.icns文件,直接作为tray托盘的图标使用。

测试代码如下:

// const {app, Tray} = require('electron')
// const path = require('path');
let tray = null
app.on('ready', () => {
  //tray = new Tray("./favicon.png")
  //tray = new Tray(path.join(__dirname,"./img/favicon.ico"));
  //tray = new Tray(path.join(__dirname,"./img/favicon.jpg"));
  //tray = new Tray(path.join(__dirname,"./img/favicon.icns"));
  //tray = new Tray(path.join(__dirname,"./img/favicon.gif"));
  //tray = new Tray(path.join(__dirname,"./img/favicon.bmp"));
  tray = new Tray(path.join(__dirname,"./img/favicon.png"));
})

苏南大叔:electron程序,tray托盘图标文件需要什么格式尺寸及位置? - electron-tray-ico-code
electron程序,tray托盘图标文件需要什么格式尺寸及位置?(图7-2)

对于electrontray的图标格式,测试结论是:

  • 支持.png/.jpg,不支持.bmp/.gif
  • win10支持.icomac支持.icns

图标放哪里

这个步骤是大家需要仔细想的。理论上来说,您的图标文件放在项目下任何目录里面都行。不过,典型的场景是:打包之前可以正常显示,打包之后就不能运行,直接报错了。那么为啥很多人的项目报错呢?报错信息如下所示。

Error processing argument at index 0

苏南大叔:electron程序,tray托盘图标文件需要什么格式尺寸及位置? - electron-tray-ico-error
electron程序,tray托盘图标文件需要什么格式尺寸及位置?(图7-3)

在前一篇文章中,苏南大叔说了,这个报错信息,如果确定格式没有问题的话,就请检查路径。为啥打包之后就找不到图标文件了呢?那是因为打包的过程中,图片的位置发生了变化,或者根本就没有复制到asar文件包里面。也就是说下面代码中的<path>出了问题。

tray = new Tray(path.join("<path>","<file>.png"));

在范例代码中,<path>的取值是__dirname,意味着当前目录。但是在实际操作中,特别是有二次打包情况的vue类的情况中,使用__dirname就不一定合适了。所以,请给自己的<path>,找到一个开发中和打包后都存在的正确取值。

调试方式

但是,打包的可用途径太多了。这里,苏南大叔就无法一一描述了。总的思路就是:
首先,请确保图标格式是被支持的。一般不会出错,.png文件是万能的。
其次,打印一下打包之后的图标最终路径,可用的“打印”方式来进行调试。可以参考:

再次,请查看一下最终的上述路径下,到底是不是存在着对应的图标。鉴于大多数情况下,都是被asar过的结果。请参考下面两篇文章:

苏南大叔:electron程序,tray托盘图标文件需要什么格式尺寸及位置? - electron-tray-ico-ui
electron程序,tray托盘图标文件需要什么格式尺寸及位置?(图7-4)

electron-vue中的图标放在哪里

理论上来说,只要你的图标文件能够被打包过去,那么路径不是问题。但是,electron-vue的项目,因为中间参杂着一个编译的过程,一些文件(夹)是不会被复制到最终结果里面的,所以,这里面,就有非常大的报错几率的。很多小伙伴也是卡在了这里,如果您愿意思考,那么请按着上述步骤自己分析一下。要是不愿意思考,也可以评论本文查看一下参考答案。

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

相关链接可以查看:

图标的尺寸

win系统中,图标的尺寸并不需要额外注意,因为是会自动缩放的。当然,如果您对像素值特别关心的话,就请额外处理处理图标文件。下面的这个文章里面,有说明,window下的图标的建议包含的尺寸,可以作为参考。

文章中建议:对于win系统中使用.ico文件的情况,为了达到最佳视觉效果。建议在中至少包括以下大小:

  • 16x16 (100% DPI scale)
  • 20x20 (125% DPI scale)
  • 24x24 (150% DPI scale)
  • 32x32 (200% DPI scale)
  • 32x32 (100% DPI scale)
  • 40x40 (125% DPI scale)
  • 48x48 (150% DPI scale)
  • 64x64 (200% DPI scale)
  • 256x256

mac系统中,这个图标的尺寸是很有必要进行限制的。因为它并不会进行图标缩放。经过苏南大叔的测试,对于1x文件来说,16*16像素,是合适的。当然,在视网膜屏幕上,使用32*32像素的2x文件,也是可以正常显示的。下面的是对比效果图:

苏南大叔:electron程序,tray托盘图标文件需要什么格式尺寸及位置? - mac-tray-128
electron程序,tray托盘图标文件需要什么格式尺寸及位置?(图7-5)

苏南大叔:electron程序,tray托盘图标文件需要什么格式尺寸及位置? - mac-tray-16
electron程序,tray托盘图标文件需要什么格式尺寸及位置?(图7-6)

苏南大叔:electron程序,tray托盘图标文件需要什么格式尺寸及位置? - mac-tray-32
electron程序,tray托盘图标文件需要什么格式尺寸及位置?(图7-7)

相关链接

结束语

electron加载tray图标,Error processing argument at index 0这个报错问题,就基本上可以结题了。如果有小伙伴看完了这么详细的教程,还是说没效果,解决不了的话。那么,只能建议您放弃治疗了。孩子,前面的路太艰辛,及时回头是岸。

更多苏南大叔写的electron教程,请参考下面的链接:

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

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

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

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