electron如何修改默认菜单,实现自定义菜单

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('替换');
                    }
                }

            ]
        }
   ];

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();
    }
});

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: