如何为 electron 中的特定 window 制作单独的菜单？

Question

I am working on an about this app window on Windows and I want to make a custom menu bar for my about window. Since I already have a custom menu is there a way I can create another one and apply it only to that specific window?

Side note: Here is my code for the new window that is supposed to stop it from being adjusted and going into full screen, but for some reason the minimize and enlarge button still work.

app.on('ready', createWindow);
electron.app.on('ready', () => {
  //Triger update check
  if (!isDev) {
    autoUpdater.checkForUpdates();
  }
})

function createWindow(){
  //create brower window
  win = new BrowserWindow({
  backgroundColor: '#2e2c29',
  width: 800,
  height: 600,
  //transparent: true,
  frame: false,
  titleBarStyle: 'hidden',
  backgroundColor: '#0000',
  webPreferences: {
    nodeIntegration: true
}
  });


//Quit when all windows are closed
  app.on('window-all-closed', () => {
    app.quit()
  })

app.once('ready', function() {

const template = [
  {
    label: 'File',
    submenu: [
      {
          label: 'About Hubris',
          click: () =>
          openAboutWindow()
          },
      { type: 'separator' },
      { role: 'hide' },
      { role: 'hideothers' },
      { role: 'unhide' },
      { type: 'separator' },
      { role: 'quit' }
    ]
  },
  {
label: 'View',
submenu: [

  { role: 'minimize' },
  { role: 'zoom' },
  { type: 'separator' },
  { role: 'togglefullscreen' }
    ]
  },
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)



//here is the code for the about window
var newWindow = null

function openAboutWindow() {

  if (newWindow) {
    newWindow.focus()
    return
  }

  newWindow = new BrowserWindow({
    height: 439,
    resizable: false,
    width: 599,
    title: 'About Hubris',
    minimizable: false,
    fullscreenable: false,
    frame: false,
    titleBarStyle: 'hidden',

  })

  newWindow.loadURL('file://' + __dirname + '/about-this-app.html')

  newWindow.on('closed', function() {
    newWindow = null
  })
}
});

Answer 1

To do this, you have to import menu from electron in at the top of our main.js file:

// From
const {app, BrowserWindow} = require('electron')

// To
const {app, BrowserWindow, Menu} = require('electron'). 

Then, near the bottom of our createWindow() function, we add:

function createWindow () {

  // some code here removed for brevity 

  var menu = Menu.buildFromTemplate([
      {
          label: 'Menu',
          submenu: [
              {label:'Adjust Notification Value'},
              {label:'CoinMarketCap'},
              {label:'Exit'}
          ]
      }
  ])
  Menu.setApplicationMenu(menu); 
}

Next, we reference Menu.buildFromTemplate([{}]), which is where our menu is actually defined and built, within a series of arrays and objects.

The "label" represents the name you want your menu to display so put what you like.

The "submenu" property is an array of objects, with each object defining the actual menu items displayed when the label is clicked.

Finally, use.setApplicationMenu to set the menu. If you save the project, and run npm start in the console, you will see the menu with it's items (array) being displayed but if your click on them nothing happens. You can change this by going back to our main.js, add the following code to make our Exit button close the application:

var menu = Menu.buildFromTemplate([
    {
        label: 'Menu',
            submenu: [
            {label:'Adjust Notification Value'},
            {label:'CoinMarketCap'},
            {
                label:'Exit', 
                click() { 
                    app.quit() 
                } 
            }
        ]
    }
  ])

So, to make a menu item clickable, we simply add a comma after the label value, and reference "click() { }"

In this case, we're calling app.quit()" when the Exit submenu item is clicked. Give it a try by running npm start in the console and click Exit. That's it!

Answer 2

You can switch menus on the fly. I have an app with 'editor' and 'presentation' modes. I create and store a menu for each mode (they have different menu items):

let editorMenu = Menu.buildFromTemplate(menuTemplate);

and subscribe to the relevant window events (focus, blur, etc). Then when a window gets focus

Menu.setApplicationMenu(editorMenu);