开发手册 欢迎您!
软件开发者资料库

Electron - Menus

Electron - Menus - 从简单和简单的步骤学习电子,从基本到高级概念,包括概述,简介,安装,电子工作原理,Hello World,构建UI,文件处理,本机节点库,进程间通信(IPC),系统对话框,菜单,系统托盘,通知,Webview,音频和视频捕获,定义快捷方式,环境变量,调试,打包应用程序,资源。

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

我们将使用两个模块 -  菜单 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文件,并使用 :