electron自定义菜单需要引入Menu模块
1.先定义一个菜单模板
const template = [
{
label:'文件',
submenu:[
{
label:'关于',
role:'about'
},
{
type:'separator'
},
{
label:'关闭',
accelerator:'Command+Q',
click:()=>{
win.close();
}
}
]
},
{
label:'编辑',
submenu:[
{
label:'复制',
click:()=>{
console.log('复制');
}
},
{
label:'剪切',
click:()=>{
console.log('剪切');
}
},
{
type:'separator'
},
{
label:'查找',
accelerator:'Command+F',
click:()=>{
console.log('查找');
}
},
{
label:'替换',
accelerator:'Command+R',
click:()=>{
console.log('替换');
}
}
]
}
];
{
label:'文件',
submenu:[
{
label:'关于',
role:'about'
},
{
type:'separator'
},
{
label:'关闭',
accelerator:'Command+Q',
click:()=>{
win.close();
}
}
]
},
{
label:'编辑',
submenu:[
{
label:'复制',
click:()=>{
console.log('复制');
}
},
{
label:'剪切',
click:()=>{
console.log('剪切');
}
},
{
type:'separator'
},
{
label:'查找',
accelerator:'Command+F',
click:()=>{
console.log('查找');
}
},
{
label:'替换',
accelerator:'Command+R',
click:()=>{
console.log('替换');
}
}
]
}
];
2.根据菜单模板生成菜单
const menu = Menu.buildFromTemplate(template);
3.将菜单设置到应用上
Menu.setApplicationMenu(menu);
完整例子如下:
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;
function createWindow(){
win = new BrowserWindow({
show:false,
webPreferences: {
nodeIntegration: true,
nativeWindowOpen:true,
webviewTag:true
}
});
win.loadFile('index.html');
//定义菜单模板
const template = [
{
label:'文件',
submenu:[
{
label:'关于',
role:'about'
},
{
type:'separator'
},
{
label:'关闭',
accelerator:'Command+Q',
click:()=>{
win.close();
}
}
]
},
{
label:'编辑',
submenu:[
{
label:'复制',
click:()=>{
console.log('复制');
}
},
{
label:'剪切',
click:()=>{
console.log('剪切');
}
},
{
type:'separator'
},
{
label:'查找',
accelerator:'Command+F',
click:()=>{
console.log('查找');
}
},
{
label:'替换',
accelerator:'Command+R',
click:()=>{
console.log('替换');
}
}
]
}
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
win.on('ready-to-show',()=>{
win.show();
});
win.on('closed',()=>{
console.log('closed');
win = null;
});
//打开开发者工具
win.webContents.openDevTools();
}
app.allowRendererProcessReuse = true;
app.on('ready',createWindow);
app.on('window-all-closed',()=>{
console.log('window-all-closed');
if(process.platform != 'darwin'){
app.quit();
}
});
app.on('activate',()=>{
console.log('activate');
if(win == null) {
createWindow();
}
});
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;
function createWindow(){
win = new BrowserWindow({
show:false,
webPreferences: {
nodeIntegration: true,
nativeWindowOpen:true,
webviewTag:true
}
});
win.loadFile('index.html');
//定义菜单模板
const template = [
{
label:'文件',
submenu:[
{
label:'关于',
role:'about'
},
{
type:'separator'
},
{
label:'关闭',
accelerator:'Command+Q',
click:()=>{
win.close();
}
}
]
},
{
label:'编辑',
submenu:[
{
label:'复制',
click:()=>{
console.log('复制');
}
},
{
label:'剪切',
click:()=>{
console.log('剪切');
}
},
{
type:'separator'
},
{
label:'查找',
accelerator:'Command+F',
click:()=>{
console.log('查找');
}
},
{
label:'替换',
accelerator:'Command+R',
click:()=>{
console.log('替换');
}
}
]
}
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
win.on('ready-to-show',()=>{
win.show();
});
win.on('closed',()=>{
console.log('closed');
win = null;
});
//打开开发者工具
win.webContents.openDevTools();
}
app.allowRendererProcessReuse = true;
app.on('ready',createWindow);
app.on('window-all-closed',()=>{
console.log('window-all-closed');
if(process.platform != 'darwin'){
app.quit();
}
});
app.on('activate',()=>{
console.log('activate');
if(win == null) {
createWindow();
}
});