主题: Electron自定义软件顶部菜单,上下文菜单以及绑定快捷键
作者: psrheartache
标签: #electron#nodejs
时间: 2018-07-06
地点: Wuhan,China
文字: 199
阅读: 1 min read

# Electron自定义软件顶部菜单以及绑定快捷键

Electron 中 Menu 模块可以用来创建原生菜单，它可用作应用菜单和 context 菜单。这个模块是一个主进程的模块，并且可以通过 remote 模块给渲染进程调用。

const { Menu } = require("electron");
    let template = [
      {
        label: "文件",
        submenu: [
          {
            label: "新建窗口",
            click: () => {
              console.log("aaa");
            }
          },
          { type: "separator" },
          {
            label: "打开文件",
            accelerator: "ctrl+x",
            click: () => {
              console.log("bbb");
            }
          }
        ]
      },
      {
        label: "编辑",
        submenu: [
          { role: "cut", label: "剪切" },
          { role: "copy", label: "复制" }
        ]
      }
    ];
    var m = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(m);

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

# Electron 自定义右键菜单

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

1
2
3
4
5
6
7
8

# Electron 中隐藏顶部菜单

const electron = require('electron')
/*获取electron窗体的菜单栏*/
const Menu = electron.Menu
/*隐藏electron创听的菜单栏*/
Menu.setApplicationMenu(null)

1
2
3
4
5

# Electron 中隐藏关闭最大化最小化按钮

mainWindow = new BrowserWindow({ 
    height: 620, 
    useContentSize: true, 
    width: 1280,
    frame: false /*去掉顶部导航 去掉关闭按钮 最大化最小化按钮*/ 
})

1
2
3
4
5
6

# 自定义关闭最大化最小化按钮

// 渲染进程
const {ipcRenderer: ipc} = require('electron');

ipc.send('min');
// more

1
2
3
4
5

// 主进程
import { app, BrowserWindow, ipcMain } from 'electron'

ipcMain.on('min', e=> mainWindow.minimize());
ipcMain.on('max', e=> {
    if (mainWindow.isMaximized()) {
        mainWindow.unmaximize()
    } else {
        mainWindow.maximize()
    }
});
ipcMain.on('close', e=> mainWindow.close());

1
2
3
4
5
6
7
8
9
10
11
12

# 自定义导航可拖拽

// 可拖拽的 
css: -webkit-app-region: drag; 
// 不可拖拽的 
css: -webkit-app-region: no-drag;

1
2
3
4