electron 菜單欄

If you are new here, please consider checking out my recent articles on Electron JS including Tray Icons.

如果您是新來的，請考慮查看我最近關于Electron JS的文章， 包括托盤圖標 。

In this tutorial, we will set up 2 menu items for a tray icon which when a user right-clicks, the menu appears just like the image below.

在本教程中，我們將為托盤圖標設置2個菜單項，當用戶右鍵單擊時，菜單如下圖所示。

Adding a menu to a system tray icon is the functionality of a tray method known as the tray.setContextMenu(), where the parameter is simply a variable or constant of the menu items passed in Menu.buildFromTemplates([]).

將菜單添加到系統任務欄圖標是稱為tray.setContextMenu()的任務欄方法的功能，其中參數只是在Menu.buildFromTemplates([])中傳遞的菜單項的變量或常量。

In this exercise,

在本練習中，

I will create a tray icon first,

我將首先創建一個任務欄圖標，

Create a constant which holds the menu items in an array,

創建一個常數，將菜單項保存在一個數組中，

And finally, pass it as a parameter to the tray method setContextMenu().

最后，將其作為參數傳遞給任務欄方法setContextMenu() 。

We are also going to use the path module which is a Node.Js built-in module to locate the source of our tray icon image and the menu module where the method Menu.buildFromTemplates([]) is derived from.

我們還將使用path模塊(它是Node.Js的內置模塊)來定位托盤圖標圖像的源以及菜單模塊，該菜單模塊是方法Menu.buildFromTemplates([])的來源。

Finally, let us write some code: Open your main JavaScript file and type,

最后，讓我們編寫一些代碼：打開您的主JavaScript文件并鍵入，

//system tray icon menu//const electron = require ('electron') // imports electron const path = require ('path') // imports path module const {app, Menu, Tray} = electron // imports menu and tray modules const BrowserWindow = electron.BrowserWindow //enables UIlet mainWindow; let tray app.on('ready', _ => {tray = new Tray (path.join ('src', 'Tray.PNG' ) ) // sets tray icon imageconst contextMenu = Menu.buildFromTemplate([ // define menu items{label: 'Help',click: () => console.log ('Help') // click event},{label: 'System',click: () => console.log ('System')}])tray.setContextMenu(contextMenu)mainWindow = new BrowserWindow({ // sets browser window dimensionsheight : 600,width : 600,}) })

Finally, run your code and enjoy the output.

最后，運行您的代碼并享受輸出。

Output:

輸出：

Hey! The browser window displays too... I just did not take a screenshot because it is blank.

嘿! 瀏覽器窗口也顯示...我只是沒有截圖，因為它是空白的。

Thanks for reading.

謝謝閱讀。

Drop your comments if in need of help.

如果需要幫助，請刪除您的評論。

翻譯自: https://www.includehelp.com/electron-js/add-tray-icon-menu-in-electron-js.aspx

electron 菜單欄

總結

以上是生活随笔為你收集整理的electron 菜单栏_如何在Electron JS中添加任务栏图标菜单？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。