Electron 自定义顶部菜单和上下文菜单

自定义顶部菜单

---

1. 主进程

main.js 代码如下（示例）：

// main.js
const electron = require("electron")
const app = electron.app
const BrowserWindow = electron.BrowserWindow

// 声明要打开的窗口
let mainWindow = null

app.on("ready",()=>{
    mainWindow = new BrowserWindow({
        width:800,
        height:800,
        webPreferences:{
            nodeIntegration:true, //开启node接口
            contextIsolation:false,
        }
    });
    
    // 引用菜单
    require("./main/menu.js")

    // 打开调试工具
    mainWindow.webContents.openDevTools();
    mainWindow.loadFile("index.html");

})


// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
    if (process.platform != 'darwin') {
      app.quit();
    }
});

2. 渲染进程定义顶部菜单

menu.js 代码如下（示例）：

const {Menu, BrowserWindow} = require("electron")

let template = [
    {
        label: "编辑", // 主菜单
        submenu:[ // 子菜单
            {label:"编辑文件名"},
            {label:"编辑菜单名"},
        ]
    },
    {
        label: "终端",
        submenu:[
            {
                label:"拆分终端",
            },
            {
                label:"新建终端",
                // 菜单快捷键
                accelerator:"ctrl + N",
                // 点击拆分终端，创建新窗口
                click:()=>{
                    let win = new BrowserWindow({
                        width:400,
                        height:400,
                        webPreferences:{
                            nodeIntegration:true,
                            contextIsolation:false,
                        }
                    });
                    win.loadURL("http:www.baidu.com");
                    win.on("closed",()=>{
                        win = null;
                    });
                }
            },
        ]
    }
]

// 构建菜单模版
const m =Menu.buildFromTemplate(template)

// 设置菜单模版
Menu.setApplicationMenu(m)

3. 实现效果

点击新建终端或按住ctrl + N，即可创建新窗口，并打开百度页面

4. 渲染进程定义上下文菜单

上下文菜单即右键菜单 contextmenu
render.js 代码如下（示例）：

const { Menu } = require('@electron/remote')

// 右键菜单功能
// const remote = require("electron") // 引入 remote 模块

let rightTemplate=[
    {
        label:"粘贴",
        accelerator:'ctrl+V',
    },
    {
        label:"复制",
        accelerator:'ctrl+C',
    },
    {
        label:"剪切",
        accelerator:'ctrl+X',
    },
]

// 建立菜单模版
var rightMenu = Menu.buildFromTemplate(rightTemplate);

window.addEventListener('contextmenu',function(e){
  //阻止当前窗口默认事件
  e.preventDefault();
    //   alert(111);
  //把菜单模板添加到右键菜单        
    rightMenu.popup()
})

5. 实现效果