electron menu 设置/隐藏

前言

使用electron实现一个简单的功能，点击菜单加载网页。

我查看了electron的文档，里面提供了几种使用方法和具体的可用实例属性。文档会在文末列出, 之后在 menu 的 template 定义的时候随时可以去查看需要的.

定义template

首先,可以拟定一个template放到主进程里,我的主进程是main.js,如果不清楚的也可以去package.json里面查看.

let template = [{
  label: 'Hello',
  submenu:[{
    label:'item1',
    click:function(){}
  },
  {
    type: 'separator'
  },{
    label:'item2',
    click:function(){}
  },
  {
    type: 'separator'
  }],
}];

id：指定了该选项唯一的id，此属性可被动态更改。
label : 菜单名字，指示项的可见标签，此属性可以动态更改。
submenu： 子菜单项定义
click: 点击事件，可以使用下面的方法进行调用
menuItem.click(event, focusedWindow, focusedWebContents)
type: ‘separator’ 分隔条

添加menu

为了实现加载页面时就加载相应的菜单,需要使用 Menu.buildFromTemplate(template) 将template添加到主进程的ready事件中。ready事件会在 Electron 完成初始化时被触发，往往监听此事件来执行加载窗口的初始化。

接着将下面这段代码添加到对应位置,运行electron就可以了.

  //引入Menu模块
  const { Menu,remote} = require('electron')

  //添加到ready调用的函数中
  let menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);
  //Menu.setApplicationMenu(null); //这个是不显示菜单栏的效果

这样会出现一个名为 Hello 菜单, 点开的效果大概是这样的.

image.png

electron预定义行为添加

这时候其实基本的功能都可以解决了,但是可能还是需要了解一下electron自带的预定义行为定义,比如调用开发者工具栏,自带的回退,最小化窗口等.
这里就需要使用到上面没有提及的role属性,role就是用于electron添加预定义行为的属性.更多参考底部文档

{
    label: "test",
    submenu: [
        { role: 'reload' }, //重新加载当前窗口
        { type: 'separator' }, //分割线
        { role: 'close' }, //close关闭当前窗口
        { role: 'toggledevtools' }, //在当前窗口中隐藏/显示开发者工具
        { role: 'togglefullscreen' }, //将当前窗口切换至全屏模式
        { role: 'minimize' }, //最小化当前窗口。
        { role: 'about' }, //MacOS中 映射到 orderFrontStandardAboutPanel 操作
        { role: 'quit' } //退出应用
    ],
}

参考文档:

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