电子托盘图标重复问题（Windows 10）答案

【问题标题】：Electron tray Icon duplication issue (Windows 10)电子托盘图标重复问题（Windows 10）
【发布时间】：2020-07-16 13:29:38
【问题描述】：

我正在构建我的第一个电子项目，但我遇到了托盘图标重复的问题。这是向您展示图片中发生的事情：

我想指出我正在测试该应用程序。经常启动和停止它。并且图标最终会减少到一个（Windows 10 垃圾收集？）。但是我仍然相信这是不正常的行为。

应用程序本身允许用户打开新窗口来监控事物。由于我不喜欢电子中“附加”窗口最小化的位置，因此我将它们设置为在最小化时“隐藏”。其想法是，当用户想要再次显示该窗口时，他们可以在右键单击系统托盘中的应用程序图标并选择所需的窗口名称时从列表中选择它。

我认为这个问题可能与我在更新托盘图标时创建和销毁托盘图标的方式有关。我所做的是销毁托盘，然后在将新窗口名称附加到模板数组后再次构建它（如下面的代码所示）。

这样做是个好主意吗？ - 我没有看到很多如何做到这一点的例子，所以我自己做了。

如果您需要更多信息，请随时在下方发表评论。谢谢！

相关代码：（在main.js中）

const iconPath = path.join(__dirname, '/images/testIcon.png')
let tray = null;

function ShowWindow(windowNameFromTray)
{
    singleWindow.webContents.send('open-window-from-other-process', windowNameFromTray);
}

ipcMain.on('open-currently-open-window', function(e, windowName)
{
    ShowWindow(windowName)
})

let template = 
[
    {
        label: 'windows',
            submenu:[]
    }
]

ipcMain.on('retrieved-windowId', function(e, windowName)
{
    tray.destroy()
    tray = new Tray(iconPath)
    tray.setToolTip('Window App')

    var element =  
        {
            label: windowName,
            click() 
            { 
                ShowWindow(windowName)
            }
        }

    template[0].submenu.push(element)
    let contextMenu = Menu.buildFromTemplate(template)
    tray.setContextMenu(contextMenu)
});

...

【问题讨论】：

这也发生在我没有 Electron 的情况下。我认为这是Windows中的一个错误。当我将鼠标悬停在图标上时，它们就会消失。
感谢您的回复。 Slack 不会发生这种情况。但我想你并没有真正拥有多个 Slack 窗口，因为 Slack 主要是选项卡。
你找到解决办法了吗？

标签： javascript electron system-tray

【解决方案1】：

你好，我不知道这对你来说也是同样的问题，但我发现这与托盘的破坏有关，首先我们必须在 main.js 文件中创建一个托盘对象，然后创建我们有用户在全局范围内的托盘对象。现在我们做错的是我们正在创建托盘图标并且我们没有破坏其他东西，我们再次创建了新东西现在我的解决方案是共享一个托盘对象到处都是这样我们破坏同一个托盘对象所以它不会'当我们创建一个新的时创建一个新的这是我的代码我在另一个文件中创建我的托盘主.js

    const electron = require("electron");
      let app = null;
        let tray = null;    
        const { app, BrowserWindow, ipcMain,Tray, Menu,dialog} = electron;
    const nativeImage = electron.nativeImage
        global.share = { app, BrowserWindow, ipcMain,Tray,tray,BackGroudProecess, Menu,mainwin,nativeImage};
const Mytray= require('./tray.js');
Mytray.Create(languagerPack);//you don't need to pass the language pack in here this code according to my developement (obivously you get that ;-) )

tray.js

module.export ={
    CreateTray(items){
    
     let p = new Promise((res,rej)=>{
       const iconPath = path.join(__dirname+"../../../img/icon.ico");
       global.share.tray  = new Tray(global.share.nativeImage.createFromPath(iconPath))
       res(global.share.tray);//this is the important palce we have pass global tray 
     })
    p.then((tray)=>{
       const trayMenuTemplate = [
          {
    
    
             label:items.not_signed,
             enabled: false
          },
    
          {
             label:items.about,// 'About',
             click: function () {
                global.share.mainwin.webContents.send("OPEN:ABOUT",{state:true});
             }
          },
    
          {
             label:items.help,// 'Help',
             click: function () {
                console.log("Clicked on Help")
             }
          },
       ]
    
       let trayMenu = global.share.Menu.buildFromTemplate(trayMenuTemplate)
       
       if(tray != null){
          tray.setContextMenu(trayMenu)
       }
    }).catch((rej)=>{console.log(rej)})
       },
    
    }

}

如何销毁？

   global.share.tray.destroy() // this way it destroys the correct tray since there is only one tray object in the whole program

当您销毁和重新使用新托盘时，您必须确保旧托盘是否被销毁，这就是您的操作方式

if(global.share.tray.isDestroyed){
  console.log("Is Destroyed");
}

【讨论】：