Electron菜单
原生菜单和上下文菜单
Menu
创建原生应用菜单和上下文菜单
进程:主进程
new Menu()
创建新菜单
静态方法
-
Menu.setApplication(menu)
设置应用菜单。
-
Menu.getApplicationMenu()
获取菜单,返回
Menu | null
。 -
Menu.sendActionToFirstResponder(action)
macOS将
action
发送到应用程序的第一个响应方。用于默认的 macOS 菜单行为。 -
Menu.buildFromTemplate(template)
设置菜单模板。返回
Menu
。template
是一个数组对象,数组中每一项是一个MenuItem
。
实例方法
-
menu.popup([options])
options
Object(optional)window
BrowserWindow(可选)- 默认为弹出窗口。x
默认为当前鼠标光标位置。如果声明了y
,则必须声明。y
默认为当前鼠标光标位置。如果声明了x
,则必须声明。positionItem
macOS 要定位在鼠标光标下指定坐标处的菜单项的索引。默认值为-1。callback
在菜单关闭后被调用的回调函数
将菜单作为
browserWindow
中的上下文菜单弹出。 -
menu.closePopup([browserWindow])
关闭
browserWindow
中的上下文菜单。 -
menu.append(menuItem)
将
menuItem
追加到菜单 。 -
menu.getMenuItemById(id)
返回具有指定
id
项的MenuItem
。 -
memu.insert(pos,menuItem)
pos
: Integer
将
menuItem
插入菜单的pos
位置。
实例事件
-
menu-will-show
返回
event
Event调用
menu.popup()
时触发。 -
menu-will-close
返回
event
Event手动关闭弹出或者调用
menu.closePopup()
时触发。
实例属性
menu.items
items
包含菜单项的MenuItem[]
数组。
示例
在主进程代码 main.js 的同级目录创建 menu.js ,内容如下:
const { Menu, BrowserWindow, shell } = require('electron')
const isMac = process.platform === 'darwin'
const template = [
{
label: '主页'
},
{
label:'技术网站推荐',
submenu:[
{
label:'Vue.js',click(){
//在浏览器中打开链接
shell.openExternal('https://cn.vuejs.org/')
},
enabled:true
},
{
type:'separator'
},
{
label: 'w3school', click() {
//打开新窗口,加载网址,若加载本项目的文件,需要使用win.loadFile('fielPath')
var win = new BrowserWindow({
webPreferences:{ //允许渲染进程使用node
nodeIntegration:true
}
})
win.loadURL('https://www.w3school.com.cn/')
win.on('close',function(){
win = null
})
}
},
{
label:'百度',click(menuItem,browserWindow,event){
//在当前窗口重新加载新内容
browserWindow.loadURL('http://www.baidu.com')
}
}
]
},
{
label:'退出',
accelerator:'ctrl+q', //快捷键设置
role:isMac ? 'close' : 'quit' //使用系统配置项--退出应用
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
在 main.js 中 ready 事件 加入
require('./menu.js')
效果图:
MenuItem
添加菜单项到应用程序菜单或者上下文菜单中
进程:主进程
new MenuItem([options])
-
options
Object-
id
-
click
Function(optional) 菜单项单击回调事件menuItem
browserWindow
event
-
label
-
sublable
-
type
可能值有normal
,separator
,submenu
,checkbox
,radio
-
role
指定菜单的行为,定义了click
之后此项忽略 -
toolTip
鼠标悬停文本。 -
accelerator
注册快捷键,绑定到该菜单项 -
registerAccelerator
Boolean (optional) Linux Windows - 设为false
,则accelerator
不生效。 -
icon
图标 -
enabled
Boolean - 设为false
,则该菜单项将会置灰且不可点击。 -
acceleratorWorksWhenHidden
Boolean macOS- 默认true
。设为false
,会阻止accelerator
项。 -
visible
Boolean - 设为false
,则隐藏该菜单项。 -
checked
Boolean - 只为checkbox
或者radio
类型菜单项指定。 -
before
-
after
-
beforeGroupContaining
-
afterGrounpContaining
-
角色
通过角色可以为 menu
添加预定义行为
role
可能值(内置角色):
-
undo
-
redo
-
cut
-
copy
-
paste
-
pasteAndMatchStyle
-
selectAll
-
delete
-
minimize
- 最小化当前窗口。 -
close
- 关闭当前窗口. -
quit
- 退出程序 -
reload
- 重新加载当前窗口。 -
forcereload
- 忽略缓存,重新加载当前窗口。 -
toggledevtools
- 在当前窗口中隐藏/显示开发者工具。 -
togglefullscreen
- 将当前窗口切换至全屏模式。 -
resetzoom
- 将主页的缩放级别重置为初始大小. -
zoomin
- 主页面放大 10%. -
zoomout
-主页面缩小 10%. -
fileMenu
- Whole default "File" menu (Close / Quit) -
editMenu
-默认的 "编辑" 菜单 (包括撤消、复制等) -
viewMenu
- 整个默认的“视图”菜单 (Reload, Toggle Developer Tools, 等等.) -
windowMenu
- 整个默认的“窗口”菜单 (Minimize, Zoom, 等等.).
macOs 提供了额外的 role
:
appMenu
- Whole default "App" menu (About, Services, etc.)about
-映射到orderFrontStandardAboutPanel
操作.hide
-映射到hide
操作.hideOthers
-映射到hideOtherApplications
操作.unhide
-映射到unhideAllApplications
操作.startSpeaking
-映射到startSpeaking
操作.stopSpeaking
-映射到stopSpeaking
操作.front
-映射到arrangeInFront
操作.zoom
-映射到performZoom
操作.toggleTabBar
-映射到toggleTabBar
操作.selectNextTab
- 映射到selectNextTab
操作.selectPreviousTab
- 映射到selectPreviousTab
操作.mergeAllWindows
- 映射到mergeAllWindows
操作.moveTabToNewWindow
- 映射到moveTabToNewWindow
操作.window
- 这个子菜单是"Window" 菜单.help
-这个子菜单是 "Help" 菜单.services
- The submenu is a "Services" menu. This is only intended for use in the Application Menu and is not the same as the "Services" submenu used in context menus in macOS apps, which is not implemented in Electron.recentDocuments
-这个子菜单是 "Open Recent" 菜单.clearRecentDocuments
-映射到clearRecentDocuments
操作.
在 macOS 上指定 role
时, label
和 accelerator
是影响菜单项的唯一选项。 所有其它选项都将被忽略。 不过,仍然支持小写的role
,如toggledevtools
。
实例属性
属性 | 类型 | 描述 |
---|---|---|
menuItem.id |
String | 指定该选项的唯一id,可被动态修改。 |
menuItem.label |
String | 可见标签 |
menuItem.sublabel |
String | 可见副标签 |
menuItem.click |
Function | menuItem.click(event,focuseWindow,focuseWebContents) |
menuItem.menu |
Menu | |
menuItem.submenu |
Menu | 子菜单 |
menuItem.type |
String | 菜单项的类型 normal , separator , submenu , checkbox , radio |
menuItem.role |
String | undo , redo , cut , copy , paste , pasteAndMatchStyle , delete , selectAll , reload , forceReload , toggleDevTools , resetZoom , zoomIn , zoomOut , togglefullscreen , window , minimize , close , help , about , services , hide , hideOthers , unhide , quit , startSpeaking , stopSpeaking , close , minimize , zoom , front , appMenu , fileMenu , editMenu , viewMenu , recentDocuments , toggleTabBar , selectNextTab , selectPreviousTab , mergeAllWindows , clearRecentDocuments , moveTabToNewWindow , windowMenu |
menuItem.accelerator |
Accelerator | |
menuItem.icon |
String|NativeImage | 图标 |
menuItem.toolTip |
String | 鼠标悬停文本。macOS |
menuItem.enabled |
Boolean | 是否启用该项。 |
menuItem.visible |
Boolean | 是否可见。 |
menuItem.checked |
Boolean | 是否选中该项。 |
menuItem.registerAccelerator |
Boolean | 加速器是应该向系统注册还是只显示。 |
menuItem.commandId |
Number | 该项的唯一顺序id。 |
右键菜单
实现方法一:在渲染进程中实现,代码如下:
const { remote } = require('electron')
const template = [
{
label:'百度'
},{
label:'360'
}
]
var m = remote.Menu.buildFromTemplate(template)
window.addEventListener('contextmenu',function(e){
e.preventDefault()
m.popup({window:remote.getCurrentWindow()})
})
实现方法二:在主进程中先注册菜单,再通过主进程监听渲染进程中右键事件。
menu.js
const { Menu, ipcMain, BrowserWindow } = require('electron')
const template = [
{
label:'百度'
},{
label:'360'
}
]
var m = Menu.buildFromTemplate(template)
ipcMain.on('contextMenu',function(){
m.popup(BrowserWindow.getFocusedWindow())
})
渲染进程文件:
const { ipcRenderer } = require("electron");
window.addEventListener('contextmenu', function (e) {
e.preventDefault();
ipcRenderer.send('contextMenu');
})