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

最新推荐文章于 2021-05-05 14:38:12 发布

cumubi7552

最新推荐文章于 2021-05-05 14:38:12 发布

阅读量1.9k

点赞数 1

文章标签： python javascript nodejs 计算机视觉 js ViewUI

原文链接：https://www.includehelp.com/electron-js/tray-icon.aspx

版权

js 任务栏浏览器图标闪烁

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

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

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.

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

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!

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