Electron:自定义右键菜单

усилの博客 2022/9/24 Electron

# 自定义右键菜单

# 方法一：渲染进程使用@electron/remote 模块实现

安装 @electron/remote

npm install --save @electron/remote

ipcRenderer/index.js

const remote = require("@electron/remote");
const Menu = remote.Menu;

var menuContextTemplate = [
  {
    label: "复制",
    role: "copy",
    click: () => {
      console.log("copy");
    },
  },
  {
    label: "黏贴",
    role: "paste",
  },
  { type: "separator" }, //分隔线
  {
    label: "其他功能",
    click: () => {
      console.log("其他功能");
    },
  },
  {
    label: "文件",
    submenu: [
      {
        label: "新建",
        accelerator: "ctrl+n",
        click: () => {
          console.log("Ctrl+N");
        },
      },
      {
        label: "打开",
        accelerator: "ctrl+o",
        click: () => {
          console.log("Ctrl+O");
        },
      },
      {
        type: "separator",
      },
      {
        label: "保存",
      },
    ],
  },
];
var menuBuilder = Menu.buildFromTemplate(menuContextTemplate);

window.onload = () => {
  window.addEventListener(
    "contextmenu",
    (e) => {
      console.log("鼠标点击了右键");
      e.preventDefault();
      menuBuilder.popup({
        // 获取当前窗口方法
        window: remote.getCurrentWindow(),
      });
    },
    false
  );
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="ipcRenderer/index.js"></script>
  </head>
  <body>
    <h2>Electron自定义顶部菜单右键菜单</h2>
    <input type="text" />
    <p>Electron自定义顶部菜单右键菜单</p>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11

main.js

const { app, BrowserWindow } = require("electron");
const remote = require("@electron/remote/main");
remote.initialize();

const path = require("path");
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, //开启渲染进程中使用nodejs
      contextIsolation: false, //开启渲染进程中使用nodejs
    },
  });
  //启动remote模块
  remote.enable(mainWindow.webContents);

  //在渲染进程中开启调试模式
  mainWindow.webContents.openDevTools();
  mainWindow.loadFile(path.join(__dirname, "index.html"));
};

app.on("ready", createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

在这里插入图片描述

方法二：使用主进程和渲染进程通信实现

// main.js
const createWindow = () => {
  require("./ipcMain/contextMenu");
};

1
2
3
4

主进程文件 contextMenu.js

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

var contextTemplate = [
  { label: "复制", role: "copy" },
  { label: "黏贴", role: "paste" },
  { type: "separator" },
  //分隔线
  {
    label: "其他功能",
    click: () => {
      console.log("click");
    },
  },
];

var menuBuilder = Menu.buildFromTemplate(contextTemplate);

//监听右键菜单
ipcMain.on("showContextmenu", () => {
  // 获取当前窗口方法
  menuBuilder.popup({ window: BrowserWindow.getFocusedWindow() });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

渲染进程

//右键菜单
window.addEventListener(
  "contextmenu",
  (e) => {
    e.preventDefault();
    ipcRenderer.send("showContextmenu");
  },
  false
);

1
2
3
4
5
6
7
8
9

// 渲染进程中获取当前窗口的方法 remote.getCurrentWindow()
// 主进程中获取当前窗口的方法 BrowserWindow.getFocusedWindow()

1
2

渲染进程和主进程具体看 electron-(渲染进程和主进程的通信)