js 任务栏浏览器图标闪烁_电子JS | 任务栏图标

灰太狼 2023-03-05 09:40 66阅读 0赞

js 任务栏浏览器图标闪烁

A **tray icon** is simply an icon that is displayed on the notification area of a desktop as seen below.

**托盘图标**只是显示在桌面通知区域中的图标，如下所示。

![Electron JS | Tray Icon (1)][Electron JS _ Tray Icon _1]

The image above is the notification area of the computer I am using to write this article and you can see some tray icons of applications that are currently running.

上面的图像是我用来撰写本文的计算机的通知区域，您可以看到一些当前正在运行的应用程序的托盘图标。

If you are new to Electron JS, consider checking out my recent articles which cover some topics in Electron JS since I am only gonna be talking about **tray icons**.

如果您是Electron JS的新手，请考虑阅读我最近的文章，这些文章涵盖Electron JS的某些主题，因为我只是在谈论**托盘图标** 。

## 入门 **(**Getting Started**)** ##

In this tutorial, we will simply create a simple application that displays an empty browser window of height and width 600.

在本教程中，我们将简单地创建一个简单的应用程序，该应用程序显示一个高度为600的空浏览器窗口。

We will also make use of the *"path"* built-in Node.Js module (*path* module) which will help us locate the source of our tray icon.

我们还将利用内置的*“ path”* Node.Js模块( *path*模块)，它将帮助我们找到任务栏图标的来源。

The **tray icon** is set using the tray module. The *tray* module has a method known as tray.setToolTip() which is the hover text when the is a mouse hover on the tray icon.

**托盘图标**使用托盘模块设置。 *托盘*模块具有一种称为tray.setToolTip()的方法，当鼠标悬停在托盘图标上时，该方法就是悬停文本。

More about tray methods and events can be read on the official Electron JS documentation.

有关托盘方法和事件的更多信息，请参阅官方的Electron JS文档。

Please do not also forget to check out the possible icon dimensions and graphic or image extensions.

请不要忘记检查可能的图标尺寸以及图形或图像扩展名。

Below is the image I am going to use as my tray icon.

下面是我将用作托盘图标的图像。

![Electron JS | Tray Icon (2)][Electron JS _ Tray Icon _2]

Open your main JavaScript file and type the following:

打开您的主要JavaScript文件，然后键入以下内容：

//system tray//
    
    const electron = require ('electron') 
    const path = require ('path') // import path module
    const {
        app,Tray} = electron // import tray module
    const BrowserWindow = electron.BrowserWindow //enables UI
    
    let mainWindow;
    let tray
    app.on('ready', _ => {
        
    	tray = new Tray (path.join ('src', 'Tray.PNG' ) )
    	// notice above that Tray.PNG is the icon or 
    	// image located in the src folder
       
    	// tray icon hover text
    	tray.setToolTip('Gracify Technology Company'); 
        
    	// browser window dimensions
    	mainWindow = new BrowserWindow({
           
    		height : 600,
    		width : 600,
    	})
    })

Finally, run your code and enjoy the output!

最后，运行您的代码并享受输出！

![Electron JS | Tray Icon (3)][Electron JS _ Tray Icon _3]

Hurraaayyyyy! that's it, guys! You can see the icon in the notifications areas.

Hurraaayyyyyy！ 就是这样，伙计们！ 您可以在通知区域中看到该图标。

Never mind the fact that I did not screen-shot the empty browser window!...

没关系，我没有对空的浏览器窗口进行屏幕截图！...

Thanks for reading.

谢谢阅读。

Drop your comments if in need of help.

如果需要帮助，请删除您的评论。

> 翻译自: [https://www.includehelp.com/electron-js/tray-icon.aspx][https_www.includehelp.com_electron-js_tray-icon.aspx]

js 任务栏浏览器图标闪烁

[Electron JS _ Tray Icon _1]: /images/20230208/2ef3cebfb3c54ad7948576209fd95db8.png
[Electron JS _ Tray Icon _2]: /images/20230208/41030b0455a6458ab7f6b9f6789ea565.png
[Electron JS _ Tray Icon _3]: /images/20230208/8a852d74525341bf8aa44583e28e68ff.png
[https_www.includehelp.com_electron-js_tray-icon.aspx]: https://www.includehelp.com/electron-js/tray-icon.aspx