Electron - Menus

桌面应用程序提供两种类型的菜单 -  应用程序菜单(位于顶部栏)和上下文菜单(右键菜单).我们将在本章中学习如何创建这两个.

我们将使用两个模块 -  菜单和 MenuItem 模块.请注意，菜单和 MenuItem 模块仅在主进程中可用.要在渲染器过程中使用这些模块，您需要远程模块.当我们创建上下文菜单时，我们会遇到这种情况.

现在，让我们为主进程创建一个新的 main.js 文件 :

const {app, BrowserWindow, Menu, MenuItem} = require('electron')
const url = require('url')
const path = require('path')

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
}

const template = [
   {
      label: 'Edit',
      submenu: [
         {
            role: 'undo'
         },
         {
            role: 'redo'
         },
         {
            type: 'separator'
         },
         {
            role: 'cut'
         },
         {
            role: 'copy'
         },
         {
            role: 'paste'
         }
      ]
   },
   
   {
      label: 'View',
      submenu: [
         {
            role: 'reload'
         },
         {
            role: 'toggledevtools'
         },
         {
            type: 'separator'
         },
         {
            role: 'resetzoom'
         },
         {
            role: 'zoomin'
         },
         {
            role: 'zoomout'
         },
         {
            type: 'separator'
         },
         {
            role: 'togglefullscreen'
         }
      ]
   },
   
   {
      role: 'window',
      submenu: [
         {
            role: 'minimize'
         },
         {
            role: 'close'
         }
      ]
   },
   
   {
      role: 'help',
      submenu: [
         {
            label: 'Learn More'
         }
      ]
   }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
app.on('ready', createWindow)

我们正在从模板构建菜单.这意味着我们将菜单作为JSON提供给函数，它将负责其余部分.现在我们必须将此菜单设置为应用程序菜单.

现在创建一个名为index.html的空HTML文件，并使用 :