Как сделать отдельное меню для конкретного окна в электронном?

Question

Я работаю над окном об этом приложении в Windows и хочу создать настраиваемую строку меню для моего окна о.Поскольку у меня уже есть пользовательское меню, есть ли способ, которым я могу создать другое и применить его только к этому конкретному окну?

Примечание: вот мой код для нового окна, которое должно остановить егонастроен и работает на весь экран, но по какой-то причине кнопка минимизации и увеличения все еще работает.

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

Вы можете переключать меню на лету.У меня есть приложение с режимами «редактор» и «презентация».Я создаю и сохраняю меню для каждого режима (они имеют разные пункты меню):

let editorMenu = Menu.buildFromTemplate(menuTemplate);

и подписываюсь на соответствующие события окна (фокус, размытие и т. Д.).Затем, когда окно получает фокус

Menu.setApplicationMenu(editorMenu);

Answer 2

Для этого вам нужно импортировать меню из электронов вверху нашего файла main.js:

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

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

Затем, в нижней части нашей функции createWindow (), мы добавим:

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); 
}

Далее мы ссылаемся на Menu.buildFromTemplate ([{}]), где наше меню фактически определено и построено, внутри серии массивов и объектов.

Метка ""представляет имя, которое вы хотите, чтобы отображалось в вашем меню, поэтому укажите то, что вам нравится.

Свойство «подменю» представляет собой массив объектов, каждый из которых определяет фактические пункты меню, отображаемые при нажатии метки.

Наконец, используйте .setApplicationMenu для установки меню.Если вы сохраните проект и запустите npm start в консоли, вы увидите меню с его элементами (массивом), но если вы щелкнете по ним, ничего не произойдет.Вы можете изменить это, вернувшись в наш main.js, добавив следующий код, чтобы наша кнопка «Выход» закрыла приложение:

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

Итак, чтобы сделать пункт меню кликабельным, мы просто добавляем запятую послезначение метки и ссылка "click () {}"

В этом случае мы вызываем app.quit () "при нажатии элемента подменю Exit. Попробуйте его, запустив npm start inконсоли и нажмите Exit. Вот и все!