Menu 菜单
最后更新于：2022-04-02 03:34:18
[TOC]
[https://electronjs.org/docs/api/menu](https://electronjs.org/docs/api/menu)
## 技巧
## 接口
`let menu = new Menu()
`
### 静态方法
#### [`Menu.setApplicationMenu(menu)`设置菜单](https://electronjs.org/docs/api/menu#menusetapplicationmenumenu)[](https://electronjs.org/docs/api/menu#menusetapplicationmenumenu "Permalink")
* 在windows和Linux系统中，使用`null`参数将会移除菜单栏, 但在MacOS系统中则不会有任何效果；
注意：这个**API**调用要在程序的`ready`事件模块之后；
#### [`Menu.buildFromTemplate(template)`](https://electronjs.org/docs/api/menu#menubuildfromtemplatetemplate)[](https://electronjs.org/docs/api/menu#menubuildfromtemplatetemplate "Permalink")
`template` 参数 是 `menu` 的数组
#### [`Menu.getApplicationMenu() `](https://electronjs.org/docs/api/menu#menugetapplicationmenu)[](https://electronjs.org/docs/api/menu#menugetapplicationmenu "Permalink")
### 实例方法
#### [`menu.popup(options)`](https://electronjs.org/docs/api/menu#menupopupoptions)[](https://electronjs.org/docs/api/menu#menupopupoptions "Permalink")
* `options`Object (可选)
* `window`[BrowserWindow](https://electronjs.org/docs/api/browser-window)(可选) - 默认为选中窗口.
* `x`数字 (可选)-默认值是当前鼠标光标的位置。如果声明了`y`, 则必须声明。
* `y`数字 (可选)-默认值是当前鼠标光标的位置。如果声明了`x`, 则必须声明。
* `positioningItem`数字 (可选)*macOS*\-要在指定坐标下的鼠标光标下定位的菜单项的索引。默认值为-1。
* `callback`Function (optional) - 会在菜单关闭后被调用.
* 将此菜单作为 browserWindow中的上下文菜单弹出,即在界面中弹出
#### `menu.closePopup([browserWindow])` 关闭`browserWindow`中的上下文菜单。
#### `menu.append(menuItem)` 追加到菜单
* `menuItem`[菜单项](https://electronjs.org/docs/api/menu-item)
#### `menu.insert(pos, menuItem)` 将`menuItem`插入菜单的`pos`位置。
* `pos`Integer
* `menuItem`[菜单项](https://electronjs.org/docs/api/menu-item)
### 实例事件
#### 'menu-will-show' 调用`menu.popup()`事件时触发该事件
#### 'menu-will-close'
### 实例属性
#### menu.items
返回`MenuItem []`数组。
## 案例
### 取消菜单栏
```
const {Menu} = require("electron");
Menu.setApplicationMenu(null); // 设置菜单部分
```
### 自定义菜单
main.js
```
const {app,BrowserWindow,Menu,shell} = require("electron");
app.on("ready",()=>{
buildMenu();
createWindow();
});
app.on('browser-window-created', function () {
let reopenMenuItem = findReopenMenuItem();
if (reopenMenuItem) reopenMenuItem.enabled = false
})
app.on('window-all-closed', function () {
let reopenMenuItem = findReopenMenuItem();
if (reopenMenuItem) reopenMenuItem.enabled = true
app.quit()
})
//定义一个创建浏览器窗口的方法
function createWindow(){
// 创建一个浏览器窗口对象，并指定窗口的大小
mainWindow=new BrowserWindow({
width:1200,
height:800,
nodeIntegration:true
});
if (debug){
mainWindow.webContents.openDevTools();
// mainWindow.maximize();//最大化运行
}
// 通过浏览器窗口对象加载index.html文件，同时也是可以加载一个互联网地址的
mainWindow.loadURL('file://'+__dirname+'/demo/hmtl/index.html');
// 同时也可以简化成：mainWindow.loadURL('./index.html');
// 监听浏览器窗口对象是否关闭，关闭之后直接将mainWindow指向空引用，也就是回收对象内存空间
mainWindow.on("closed",function(){
mainWindow = null;
});
}
/**
* 自定义菜单
*/
function buildMenu() {
let template = [
{
label: 'Edit ( 操作 )',
submenu: [{
label: 'Copy ( 复制 )',
accelerator: 'CmdOrCtrl+C',
role: 'copy'
}, {
label: 'Paste ( 粘贴 )',
accelerator: 'CmdOrCtrl+V',
role: 'paste'
}, {
label: 'Reload ( 重新加载 )',
accelerator: 'CmdOrCtrl+R',
click: function (item, focusedWindow) {
if (focusedWindow) {
// on reload, start fresh and close any old
// open secondary windows
if (focusedWindow.id === 1) {
BrowserWindow.getAllWindows().forEach(function (win) {
if (win.id > 1) {
win.close()
}
})
}
focusedWindow.reload()
}
}
}]
},
{
label: 'Window ( 窗口 )',
role: 'window',
submenu: [{
label: 'Minimize ( 最小化 )',
accelerator: 'CmdOrCtrl+M',
role: 'minimize'
}, {
label: 'Close ( 关闭 )',
accelerator: 'CmdOrCtrl+W',
role: 'close'
}, {
label: '切换开发者工具',
accelerator: (function () {
if (process.platform === 'darwin') {
return 'Alt+Command+I'
} else {
return 'Ctrl+Shift+I'
}
})(),
click: function (item, focusedWindow) {
if (focusedWindow) {
focusedWindow.toggleDevTools()
}
}
}, {
type: 'separator'
}]
},
{
label: 'Help ( 帮助 ) ',
role: 'help',
submenu: [{
label: 'FeedBack ( 意见反馈 )',
click: function () {
shell.openExternal('https://forum.iptchain.net')
}
},{
label:"测试打印日志",
click(){
console.log("测试打印日志");
}
}
]
}
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu) // 设置菜单部分
/**
* 增加更新相关的菜单选项
*/
function addUpdateMenuItems (items, position) {
if (process.mas) return;
const version = app.getVersion();
let updateItems = [{
label: `Version ${version}`,
enabled: false
}, {
label: 'Checking for Update',
enabled: false,
key: 'checkingForUpdate'
}, {
label: 'Check for Update',
visible: false,
key: 'checkForUpdate',
click: function () {
require('electron').autoUpdater.checkForUpdates()
}
}, {
label: 'Restart and Install Update',
enabled: true,
visible: false,
key: 'restartToUpdate',
click: function () {
require('electron').autoUpdater.quitAndInstall()
}
}]
items.splice.apply(items, [position, 0].concat(updateItems))
}
// 针对Mac端的一些配置
if (process.platform === 'darwin') {
const name = electron.app.getName();
template.unshift({
label: name,
submenu: [{
label: 'Quit ( 退出 )',
accelerator: 'Command+Q',
click: function () {
app.quit()
}
}]
})
// Window menu.
template[3].submenu.push({
type: 'separator'
}, {
label: 'Bring All to Front',
role: 'front'
})
addUpdateMenuItems(template[0].submenu, 1)
}
// 针对Windows端的一些配置
if (process.platform === 'win32') {
const helpMenu = template[template.length - 1].submenu;
addUpdateMenuItems(helpMenu, 0)
}
}
/**
* 自定义菜单
* @returns {*}
*/
function findReopenMenuItem () {
const menu = Menu.getApplicationMenu();
if (!menu) return;
let reopenMenuItem
menu.items.forEach(function (item) {
if (item.submenu) {
item.submenu.items.forEach(function (item) {
if (item.key === 'reopenMenuItem') {
reopenMenuItem = item
}
})
}
})
return reopenMenuItem;
}
```
';