Electron官方文档

1. 创建Menu菜单 （头部菜单）

------ 新建 menu.js 敲入下面的代码 ------

// 1. 引入Electron中的Menu模块
const { Menu } = require("electron");

// 2. 创建一个菜单数组
let menuTemplate = [
    // 一级菜单
    {
        label: "文件",
        // 二级菜单 submenu
        submenu: [
            {
                label: "编辑"
            },
            {
                label: "编辑"
            },
            {
                label: "编辑"
            }
        ]
    },
    {
        label: "编辑",
        
    }
];

// 3. 用于构建MenuItem
let menuBuilder = Menu.buildFromTemplate(menuTemplate);

// 4. setApplicationMenu 在macOS上将 menu设置成应用内菜单 在windows和Linux上，menu 将会被设置成窗口顶部菜单
Menu.setApplicationMenu(menuBuilder);

// 5. 主进程中引入 menu.js , 运行electron

2. 绑定点击事件、快捷键(accelerator)、角色(rote)、分隔符

// 还是刚刚那个菜单数组
let menuTemplate = [
    // 一级菜单
    {
        label: "文件",
        // 二级菜单
        submenu: [
            {
                label: "新建",
                // 给菜单绑定点击事件
                click: () => {
                    console.log("Ctrl + N");
                },
                // 给菜单绑定快捷键，可能有一些快捷键是电脑自带的快捷键，设置了可能不行 比如 ctrl + c
                accelerator: "ctrl+n"
            },
            {
                label: "打开"
            },
            {
                label: "保存"
            }
        ]
    },
    {
        label: "编辑",
        submenu: [
            // 系统自带的快捷键需要借助 role 属性来绑定
            {
                label: "复制",
                role: "copy",
            },
             // 使用分隔符不同label之间有一条横线
            {
                type: "separator",
            },
            {
                label: "粘贴",
                role: "paste",
            }
        ]

    }
];

右键菜单

实现右键菜单的两种方式：

1. 使用 @electron/remote 模块实现
2. 使用主进程和渲染进程通信实现

这里我们使用第一种方法

// 先在主进程中 mian.js / index.js 中引入remote模块
// 1.引入remote并初始化模块
const remote = require('@electron/remote/main');
remote.initialize();

// 2. 在 createWindow 函数中添加 启动remote模块
const createWindow = () => {
  .
  .
  .
  // 2.启动remote模块
  remote.enable(mainWindow.webContents);
  .
  .
  .
};

创建一个 js 文件，名字自取，并在渲染渲染进程中引入，敲入以下代码

const remote = require('@electron/remote');

const Menu = remote.Menu;

// 右键菜单
let menuContextTemplate = [
    {
        label: "复制",
        role: "copy",
        click: () => {
            console.log("复制");
        }
    },
    {
        label: "粘贴",
        role: "paste",
        click: () => {
            console.log("粘贴");
        }
    },
    {
        type: "separator",
    },
    {
        label: "其他功能",
        click: () => {
            console.log("其他功能");
        }

    },
    // 也可以定义子菜单哦
    {
        label: "文件",
        // 二级菜单
        submenu: [
            {
                label: "新建",
                // 给菜单绑定点击事件
                click: () => {
                    console.log("Ctrl + N");
                },
                // 给菜单绑定快捷键，可能有一些快捷键是电脑自带的快捷键，设置了可能不行 比如 ctrl + c
                accelerator: "ctrl+n"
            },
            {
                label: "打开"
            },
            // 使用分隔符不同label之间有一条横线
            {
                type: "separator"
            },
            {
                label: "保存"
            }
        ]
    },
];

// 用于构建MenuItem
let menuBuilder = Menu.buildFromTemplate(menuContextTemplate);

window.onload = () => {
    console.log("右键菜单");
    // 监听鼠标右键的点击事件
    window.addEventListener("contextmenu", (e) => {
        console.log("鼠标点击了右键");
        
        // 阻止默认事件
        e.preventDefault();

        // 调用popup方法弹出菜单
        menuBuilder.popup({
            window: remote.getCurrentWindow()
        })
    }, false);
}

menu.popup([options])

• options Object (可选)

  • window BrowserWindow (可选) - 默认为选中窗口.
  • x Number (可选) - 默认为当前鼠标的位置。 如果指定了y，则该选项必选。
  • y Number (可选) - 默认为当前鼠标的位置。 如果指定了x，则该选项必选。
  • positioningItem Number (可选) macOS - 在指定鼠标光标下定位的菜单项的索引。 默认值为 -1。
  • callback Function (optional) - 会在菜单关闭后被调用.

弹出此菜单作为上下文菜单在 BrowserWindow。

Menu.setApplicationMenu(menu)

Menu.getApplicationMenu()