electron tray托盘图标文件格式尺寸及位置

Z时代
2024-01-10
分类：技术分享

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

本文测试环境：win10。注意点就两个，一是格式（一般人不会犯错），二是位置（一般人都是这里出错了）。加油，少年！

图标的格式

首先要解决图标格式的问题，大家在这里总是傻傻的不清楚。其实，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"));})

图标放哪里

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

Error processing argument at index 0

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

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

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

调试方式

但是，打包的可用途径太多了。这里，苏南大叔就无法一一描述了。总的思路就是：

首先，请确保图标格式是被支持的。一般不会出错，.png文件是万能的。

其次，打印一下打包之后的图标最终路径，可用的“打印”方式来进行调试。可以参考：

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

`electron-vue`中的图标放在哪里

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