Question

5.1 主进程中调用 Menu 模块-自定义软件顶部菜单

https://electronjs.org/docs/api/menu-item

Electron 中 Menu 模块可以用来创建原生菜单，它可用作应用菜单和 context 菜单

这个模块是一个主进程的模块，并且可以通过 remote 模块给渲染进程调用

// main/menu.js
const { Menu }  = require('electron')

// 文档 https://electronjs.org/docs/api/menu-item
// 菜单项目
let menus = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建文件',
        accelerator: 'ctrl+n', // 绑定快捷键
        click: function () { // 绑定事件
          console.log('新建文件')
        }
      },
      {
        label: '新建窗口',
        click: function () {
          console.log('新建窗口')
        }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '复制',
        role: 'copy' // 调用内置角色实现对应功能
      },
      {
        label: '剪切',
        role: 'cut'  // 调用内置角色实现对应功能
      }
    ]
  },
  {
    label: '视图',
    submenu: [
      {
        label: '浏览'
      },
      {
        label: '搜索'
      }
    ]
  }
]

let m = Menu.buildFromTemplate(menus)
Menu.setApplicationMenu(m)

// 在主进程 src/index.js 中引入
const createWindow = () => {

  // 创建菜单  
  // 引入菜单模块
  require('./main/menu.js')
};

我们给菜单绑定事件，在命令行控制台可以看到

5.2 渲染进程中调用 Menu 模块

不推荐使用这种方式，建议在主进程中使用

1. remote

通过 remote 调用主进程的方法

// 菜单引入的方式发生变化
const { Menu }  = require('electron').remote

// 其他代码和上面菜单一样
// ...

2. 加入 index.html

<script src="render/menu.js"></script>

5.3 渲染进程中自定义右键菜单

1. 定义菜单

// render/menu.js

// 在渲染进程中通过 remote 模块调用主进程中的模块
const { Menu }  = require('electron').remote
const { remote } = require('electron')

// 文档 https://electronjs.org/docs/api/menu-item
// 菜单项目
let menus = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建文件',
        accelerator: 'ctrl+n', // 绑定快捷键
        click: function () { // 绑定事件
          console.log('新建文件')
        }
      },
      {
        label: '新建窗口',
        click: function () {
          console.log('新建窗口')
        }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '复制',
        role: 'copy' // 调用内置角色实现对应功能
      },
      {
        label: '剪切',
        role: 'cut'  // 调用内置角色实现对应功能
      }
    ]
  },
  {
    label: '视图',
    submenu: [
      {
        label: '浏览'
      },
      {
        label: '搜索'
      }
    ]
  }
]

let m = Menu.buildFromTemplate(menus)
// Menu.setApplicationMenu(m)

// 绑定右键菜单
window.addEventListener('contextmenu', (e)=>{
   e.preventDefault()
   m.popup({
  window: remote.getCurrentWindow()
   })
}, false)

2. 引入

<!--index.html-->
<script src="render/menu.js"></script>