Electron入门——菜单栏设置与右键菜单

版权声明： https://blog.csdn.net/GISuuser/article/details/86680599

菜单实现

Electron框架中的顶部菜单栏有俩种实现方式

1在主线程中实现

const { app, Menu ,BrowserWindow} = require('electron');

//设置菜单
let dockMenu = Menu.buildFromTemplate([
    {
        label: '文件', click: function () {
            console.log('点击事件');
        }
    },
    {
        label: '编辑', submenu: [
            {label: '保存'},
            {label: '另存'}
        ]
    },
    {label: '帮助'}
]);
Menu.setApplicationMenu(dockMenu);

2在渲染线程中实现

 const {remote} = require('electron');
    const {Menu, MenuItem} = remote;

    let dockMenu = Menu.buildFromTemplate([
        {
            label: '文件', click: function () {
                console.log('点击事件');
            }
        },
        {
            label: '编辑', submenu: [
                {label: '保存'},
                {label: '另存'}
            ]
        },
        {label: '帮助'}
    ]);

    Menu.setApplicationMenu(dockMenu);

右键菜单实现

右键菜单目前只了解到了在渲染线程中实现的方法，就是屏蔽掉原来的右键，调用Electron的右键菜单

    const {remote} = require('electron');
    const {Menu, MenuItem} = remote;

    //右键餐单
    const menu = new Menu();
    menu.append(new MenuItem({
        label: '放大',
        click:function ()  {
            console.log('item 1 clicked')
        }
    }));
    menu.append(new MenuItem({type: 'separator'}));//分割线
    menu.append(new MenuItem({label: '缩小', type: 'checkbox', checked: true}));//选中

    window.addEventListener('contextmenu', (e) => {
        e.preventDefault();
        menu.popup({window: remote.getCurrentWindow()})
    }, false)

窗体标题修改

运行代码后弹出的窗体的title修改很简单，直接修改html文件的

<title>测试程序</title>

即可