electron窗口图标_如何在Electron JS中设置窗口图标？

electron窗口图标

入门 (Getting Started)

I hope you all have an idea of what a window icon is all about. Below is an example of window icons currently running on my computer.

我希望大家对窗口图标的含义有所了解。 以下是计算机上当前正在运行的窗口图标的示例。

These icons are just a graphical representation of applications and mostly hang on the window taskbar. Remember Electron js is all about building native desktop applications using HTML, CSS, and JavaScript. Our applications too should have a window icon.

这些图标只是应用程序的图形表示，并且大多挂在窗口任务栏上。 记住，Electron js就是关于使用HTML ， CSS和JavaScript构建本机桌面应用程序的。 我们的应用程序也应该有一个窗口图标。

Okay, enough literature!. Adding a window icon is as simple as you can imagine using the icon property of BrowserWindow.

好的，足够的文学作品！ 使用BrowserWindow的icon属性，添加窗口图标非常简单。

We will, therefore;

因此，我们将；

• Import all required modules.

  导入所有必需的模块。

• Create a new browser window of height and width 600 which is the user interface or platform of the Electron JS application.

  创建一个新的高度和宽度为 600的浏览器窗口，该窗口是Electron JS应用程序的用户界面或平台。

• Add the window icon using icon property and passing the folder and image to be used as an icon. It is written on their official documentation, saying (.ico) file extension is preferable and best. You can read more about window icon extensions and sizes on their official documentation.

  使用icon属性添加窗口图标，并传递要用作图标的文件夹和图像。 它写在他们的官方文档中，说( .ico )文件扩展名是最佳和最佳选择。 您可以在其官方文档中阅读有关窗口图标扩展名和大小的更多信息。

• Below is the tray icon I will use in ".png" extension which will be converted to ".ico" format.

  下面是我将以“ .png”扩展名使用的任务栏图标，该图标将转换为“ .ico”格式。

  

• You can check online graphics conversion tools to convert your icon or image to the ".ico" format.

  您可以检查在线图形转换工具，以将图标或图像转换为“ .ico”格式。

• Finally, run your code and enjoy the output.

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

In your main JavaScript file, type the following,

在您的主要JavaScript文件中，键入以下内容，

//system tray icon menu//

const electron = require ('electron')  // imports electron
const {app} = electron // imports menu and tray modules
const BrowserWindow = electron.BrowserWindow // calls brower window for use
let mainWindow;
app.on('ready', _ => {    
    // create browser window and set browser window dimensions
	mainWindow = new BrowserWindow({ 
        height : 600,
        width : 600,
        icon: 'src/Tray.ico' // sets window icon
    })
})

Output:

输出：

Hurry! And as you can see, that is the window icon just beside other icons and an empty browser window.

匆忙！ 如您所见，这是其他图标旁边的窗口图标和一个空的浏览器窗口。

Thanks for reading.

谢谢阅读。

Drop your comments if in need of help.

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

翻译自: https://www.includehelp.com/electron-js/set-a-window-icon.aspx

electron窗口图标