桌面应用程序提供两种类型的菜单 - 应用程序菜单(位于顶部栏)和上下文菜单(右键菜单).我们将在本章中学习如何创建这两个.
我们将使用两个模块 - 菜单和 MenuItem 模块.请注意,菜单和 MenuItem 模块仅在主进程中可用.要在渲染器过程中使用这些模块,您需要远程模块.当我们创建上下文菜单时,我们会遇到这种情况.
现在,让我们为主进程创建一个新的 main.js 文件 :
const {app, BrowserWindow, Menu, MenuItem} = require('electron')const url = require('url')const path = require('path')let winfunction 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文件,并使用 :