本文介绍:菜单

创建应用程序菜单和上下文菜单

进程: 主进程​

new Menu()

用途:创建新菜单

静态方法

Menu.setApplicationMenu(menu)

用途:设置应用菜单(在macOS中为应用菜单,Windows 和 Linux中为窗口顶部菜单)

• menu Menu
  注意: 这个API必须置于 app 模块的 ready之后.

Menu.getApplicationMenu()

用途:获取应用菜单

如果应用没有菜单的话,返回 null.有则返回菜单 Menu ,请注意,该返回菜单 Menu实例不支持动态添加或删除菜单项.但 实例属性 还是仍然支持动态修改.

Menu.sendActionToFirstResponder(action) macOS

用途:模拟 Cocoa 菜单的默认行为,发送 action 给应用的第一个响应器

• action String

通常你只需使用 MenuItem 的属性role模拟macOS默认的菜单行为.
更多macOS原生action,请参阅macOS Cocoa事件处理指南​

Menu.buildFromTemplate(template)

用途:从 template中创建菜单

• template MenuItemConstructorOptions[]

返回 Menu,一般来说, template 只是用来构造 MenuItem 的数组 options .你也可以向 template 元素添加其它东西,使它们该菜单项的属性.

实例方法

menu.popup([browserWindow, options])

用途:在指定位置( x, y)弹出菜单

• browserWindow BrowserWindow (可选) - 默认为聚焦窗口.

• options Object(可选)
  • x Number (可选) - 当前光标的 x ,默认为 -1.

  • y Number (如果存在 x,则该项必须) -当前光标的 y.

  • async Boolean (可选) - 同异步设置, true为同步即立即返回调用, false则是选菜单被择或关闭等操作后返回, 默认为 false.

  • positioningItem Number (可选) macOS - 在指定坐标鼠标位置下面的菜单项的索引. 默认为 -1.弹出此菜单作为browserWindow中的上下文菜单.

menu.closePopup([browserWindow])

用途:关闭 browserWindow中打开的上下文菜单

• browserWindow BrowserWindow (可选) - 默认为聚焦窗口.

menu.append(menuItem)

用途:将 menuItem附加到菜单

• menuItem MenuItem

menu.insert(pos, menuItem)

用途:将 menuItem插入到菜单的 pos位置

• pos Integer

• menuItem MenuItem

实例属性

menu.items

一个包含菜单项的 MenuItem[]数组。每个Menu由多个MenuItem组成,每个 MenuItem可以有一个子菜单。

例子

Menu类仅在主进程中可用,但您也可以通过remote模块在渲染过程中使用它。

主进程

在主进程中创建应用程序菜单的示例:
1
const {app, Menu} = require('electron')
2
​
3
const template = [
4
{
5
label: 'Edit',
6
submenu: [
7
{
8
role: 'undo'
9
},
10
{
11
role: 'redo'
12
},
13
{
14
type: 'separator'
15
},
16
{
17
role: 'cut'
18
},
19
{
20
role: 'copy'
21
},
22
{
23
role: 'paste'
24
},
25
{
26
role: 'pasteandmatchstyle'
27
},
28
{
29
role: 'delete'
30
},
31
{
32
role: 'selectall'
33
}
34
]
35
},
36
{
37
label: 'View',
38
submenu: [
39
{
40
role: 'reload'
41
},
42
{
43
role: 'forcereload'
44
},
45
{
46
role: 'toggledevtools'
47
},
48
{
49
type: 'separator'
50
},
51
{
52
role: 'resetzoom'
53
},
54
{
55
role: 'zoomin'
56
},
57
{
58
role: 'zoomout'
59
},
60
{
61
type: 'separator'
62
},
63
{
64
role: 'togglefullscreen'
65
}
66
]
67
},
68
{
69
role: 'window',
70
submenu: [
71
{
72
role: 'minimize'
73
},
74
{
75
role: 'close'
76
}
77
]
78
},
79
{
80
role: 'help',
81
submenu: [
82
{
83
label: 'Learn More',
84
click () { require('electron').shell.openExternal('http://electron.atom.io') }
85
}
86
]
87
}
88
]
89
​
90
if (process.platform === 'darwin') {
91
template.unshift({
92
label: app.getName(),
93
submenu: [
94
{
95
role: 'about'
96
},
97
{
98
type: 'separator'
99
},
100
{
101
role: 'services',
102
submenu: []
103
},
104
{
105
type: 'separator'
106
},
107
{
108
role: 'hide'
109
},
110
{
111
role: 'hideothers'
112
},
113
{
114
role: 'unhide'
115
},
116
{
117
type: 'separator'
118
},
119
{
120
role: 'quit'
121
}
122
]
123
})
124
// 编辑菜单
125
template[1].submenu.push(
126
{
127
type: 'separator'
128
},
129
{
130
label: 'Speech',
131
submenu: [
132
{
133
role: 'startspeaking'
134
},
135
{
136
role: 'stopspeaking'
137
}
138
]
139
}
140
)
141
//窗口菜单
142
template[3].submenu = [
143
{
144
label: 'Close',
145
accelerator: 'CmdOrCtrl+W',
146
role: 'close'
147
},
148
{
149
label: 'Minimize',
150
accelerator: 'CmdOrCtrl+M',
151
role: 'minimize'
152
},
153
{
154
label: 'Zoom',
155
role: 'zoom'
156
},
157
{
158
type: 'separator'
159
},
160
{
161
label: 'Bring All to Front',
162
role: 'front'
163
}
164
]
165
}
166
​
167
const menu = Menu.buildFromTemplate(template)
168
Menu.setApplicationMenu(menu)
Copied!

渲染进程

使用remote模块在渲染进程中动态创建菜单的示例,当用户右击页面时显示:
1
<!-- index.html -->
2
<script>
3
const {remote} = require('electron')
4
const {Menu, MenuItem} = remote
5
​
6
const menu = new Menu()
7
menu.append(new MenuItem({label: 'MenuItem1', click() { console.log('item 1 clicked') }}))
8
menu.append(new MenuItem({type: 'separator'}))
9
menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))
10
​
11
window.addEventListener('contextmenu', (e) => {
12
e.preventDefault()
13
menu.popup(remote.getCurrentWindow())
14
}, false)
15
</script>
Copied!

macOS应用程序菜单注意事项

相对于windows 和 linux, macOS 上的应用菜单是完全不同的样式,这里是一些注意事项,来让你的菜单项更原生化.

标准菜单

在macOS上有很多系统定义的标准菜单，例如 Services和 Windows菜单。要使菜单成为标准菜单，您设置菜单的 role 属性，Electron 将会自动识别,可选值有：

• window

• help

• services

标准菜单项操作

macOS为某些菜单项提供了标准操作，例如 关于xxx， 隐藏xxx和 隐藏其他。要将菜单项操作设置为标准操作，你需要设置菜单的 role 属性。

主菜单的名称

在 macOS ,无论你设置的什么标签,应用菜单的第一个菜单项的标签始终未你的应用名字.
想要改变它的话,你必须通过修改应用程序包的 Info.plist 文件来修改应用名字.详见关于信息属性列表文件​

设置特定浏览器窗口的菜单 (Linux Windows)

浏览器窗口的setMenu 方法 可以设置某些浏览

菜单项位置

当通过 Menu.buildFromTemplate 创建菜单的时候,你可以使用 position and id 来放置菜单项. MenuItem 的属性 position 格式为 [placement]=[id], placement 取值为 before, after, 或 endof 三个参数, id 是已存在菜单项的唯一 ID:

• before - 在指定id菜单项之前插入. 如果指定菜单项不存在,则将其插在菜单末尾.

• after - 在指定id菜单项之后插入. 如果指定菜单项不存在,则将其插在菜单末尾.

• endof - 在包含指定id菜单项的分组末尾插入. 如果指定菜单项不存在, 则将用id创建新的分组,并在分组中插入菜单项.

当某个菜单项插入成功后,未插入的其它菜单项会跟随插入.所以,如需在同位置插入一组菜单项,只需将这个组第一个菜单项插入指定位置.

示例

模板1:
1
[
2
{label: '4', id: '4'},
3
{label: '5', id: '5'},
4
{label: '1', id: '1', position: 'before=4'},
5
{label: '2', id: '2'},
6
{label: '3', id: '3'}
7
]
Copied!

菜单1:
1
- 1
2
- 2
3
- 3
4
- 4
5
- 5
Copied!

模板2:
1
[
2
{label: 'a', position: 'endof=letters'},
3
{label: '1', position: 'endof=numbers'},
4
{label: 'b', position: 'endof=letters'},
5
{label: '2', position: 'endof=numbers'},
6
{label: 'c', position: 'endof=letters'},
7
{label: '3', position: 'endof=numbers'}
8
]
Copied!

菜单2:
1
- ---
2
- a
3
- b
4
- c
5
- ---
6
- 1
7
- 2
8
- 3
Copied!