关于electron:Electron原生菜单

12次阅读

共计 5169 个字符，预计需要花费 13 分钟才能阅读完成。

Electron 中能够应用 html 来开发其中展现的内容，一些菜单也能够以 html 的模式来绘制，点击时调用相干 api 即可，尽管构建不便，款式可任意调整。但其理论是模仿的菜单，并非利用原生的菜单。这种模仿的菜单有如下有余：

html 模仿生成，非原生。
每个性能均需自行代码调用或实现，而理论原生菜单有很多预设行为可间接应用。
Mac 和 Linux 中模仿的菜单无奈显示到最上方的菜单栏中去。
html 模仿菜单无奈生成系统托盘的菜单。

上面将介绍一下 Electron 中的原生菜单。

在 Electron 中有三种类型的菜单：利用菜单、上下文菜单及托盘菜单。

利用菜单即利用上方的那一条菜单。

构建菜单只须要一个数组即可，其中每个成员即为一个菜单项，每个菜单项均有一些指定的配置。以如下代码为例：

const myMenuTemplate = [
  {
    // 设置菜单项文本
    label: '文件',
    // 设置子菜单
    submenu: [
      {
        label: '对于 Electron',
        // 设置菜单角色
        role: 'about', // about（对于），此值只针对 Mac  OS X 零碎
        // 点击事件 role 属性能辨认时 点击事件有效
        click: () => {var aboutWin = new BrowserWindow({ width: 300, height: 200, parent: win, modal: true});
          aboutWin.loadFile('about.html');
        }
      },
      {
        // 设置菜单的类型是分隔栏
        type: 'separator'
      },
      {
        label: '敞开',
        // 设置菜单的热键
        accelerator: 'Command+Q',
        click: () => {win.close();
        }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '复制',
        click: () => {win.webContents.insertText('复制');
        }
      },
      {
        label: '剪切',
        click: () => {win.webContents.insertText('剪切');
        }
      },
      {type: 'separator'},
      {
        label: '查找',
        accelerator: 'Command+F',
        click: () => {win.webContents.insertText('查找');
        }
      },
      {
        label: '替换',
        accelerator: 'Command+R',
        click: () => {win.webContents.insertText('替换');
        }
      }
    ]
  }
];

以上就是一个菜单的配置，罕用的有如下配置：

id 可选，指定菜单的 id，后续如需应用可间接通过 id 获取。
type 菜单类型，可选值 normal、separator、submenu、checkbox 或 radio。
label 用于配置菜单上显示的文本。
click 菜单点击处理函数。
checked 是否曾经勾选，仅对类型为 checkbox 或 radio 的菜单项无效。
accelerator 此菜单对应的快捷键。
icon 菜单我的项目上的图标。需特地留神，图标不会主动缩放，需提供适合大小图片，兼容高 DPI 设施需依照命名标准提供图标，参考高分辨率
role 指此菜单的一些零碎预约义行为，如复制、粘贴、最小化、最大化等，值零碎可辨认时，配置的点击事件将会有效。此配置的值在 Mac 下有更多的反对，具体可参考菜单角色。

更多菜单项目标配置能够参考菜单项

要利用菜单，必须要应用 Menu 类，其定义放在 electron 命名空间下。Menu 类有以下两个静态方法，用于生成并利用菜单

buildFromTemplate(menuTpl /* menu 菜单配置 */) 用来依据菜单配置生成菜单实例，返回值为菜单对象，可替换为 new Menu()
setApplicationMenu(menu /* 菜单对象 */) 办法将其作为利用菜单。

加载文件并利用菜单代码如下：

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;

function createWindow() {win = new BrowserWindow({ file: 'index.html'});
  win.loadFile('./index.html');
  // 利用下面筹备好的菜单配置生成
  const template = myMenuTemplate;
  //  创立菜单对象
  const menu = Menu.buildFromTemplate(template);
  //  设置利用菜单
  Menu.setApplicationMenu(menu);
  win.on('closed', () => {console.log('closed');
    win = null;
  });
}
app.on('ready', createWindow);
app.on('activate', () => {if (win === null) {createWindow();
  }
});

基于以上代码，window 下能够看到如下成果：

Mac 下是如下成果：

window 下咱们自定义的对于成果：

而 Mac 下 about 间接由零碎提供：

效果图

很显著，在 window 下正如配置的样子，而 Mac 上却有显著不同，第一个文件菜单不见了，编辑外面又多了两个菜单我的项目。

这是 Mac 零碎自身的个性，其中第一个菜单在 Mac 下的文本显示必然是利用的名称，此处是以 electron 命令启动的所以是 electron。能够了解为 Mac 下第一个菜单项配置 label 是有效的。（想想看你的 Mac 第一个菜单大多数都是利用的名称，如 Safri、PhotoShop CC）

如果你就是有强迫症，肯定要改这个需批改利用程序包的 Info.plist 文件，请参考 About Information Property List Files

以上即为默认配置利用菜单的模式，不过在理论场景中常常还会有动静调整菜单的需要，如在某些状态下某个菜单不可用，进入某种状态时多一个菜单，此时咱们须要可能调整菜单项目标可用性或可见性并提供动静新增菜单的能力。

有如下相干配置可调整菜单项的状态：

menuItem.enabled 布尔值标识菜单项是否启用该项。
menuItem.visible 布尔值标识菜单项是否可见。
menuItem.checked 布尔值标识菜单项是否选中该项。

获取菜单项能够应用菜单对象上的 getMenuItemById(id) 办法，此办法将返回对应的菜单项，对菜单项的相干属性进行调整即可。

新增菜单我的项目，能够先应用 new MenuItem() 构建一个菜单项，然调用菜单实例的如下办法进行插入：

menu.append(menuItem) 在菜单中增加一个菜单。
menu.insert(pos, menuItem) 在菜单中的指定地位增加一个新菜单项

windows 下顺次点击切换显示和切换启用成果如下：

新增成果如下：

mac 中切换和新增成果：

上下文菜单即鼠标右键菜单，构建菜单的形式还是和下面利用菜单中讲到的形式一样，通过菜单项的配置数组来生成。不过使之成为上下文菜单不再须要应用 setApplicationMenu() 办法，仅需构建好菜单，而后监听 contextmenu 事件，调用 popup({x,y}) 在指定地位显示菜单即可。

不残缺代码示例如下：

const menu = new Menu(/* 菜单配置数组 */);
document.getElementById('panel').addEventListener('contextmenu', (ev) => {event.preventDefault();
  const {x, y} = ev;
  //  弹出上下文菜单
  menu.popup({x, y});
  return false;
});

当在某种状况下须要敞开高低菜单时，仅需调用菜单对象的 colsePopup(browserWindow) 办法即可。如果利用波及多窗口，需敞开其余窗口的上下文菜单时，可将此窗口作为参数传入即可，默认是操作以后窗口。

其余的中央和利用菜单完全相同。

托盘菜单即 window 中右下角点击时的菜单，mac 上为右上方利用小图标点击的菜单。

不过默认利用是不会在托盘中显示的，如需显示，须要应用 Electron 中的 Tray 类来创立。

以如下演示代码即可创立托盘图标，并关联点击的托盘菜单。

const {app, Menu, Tray, BrowserWindow} = require('electron')
let tray;
let contextMenu;

function createWindow() {
  win = new BrowserWindow({file: 'index.html'});
  win.loadFile('./index.html');
  //  创立 Tray 对象，并指定托盘图标
  tray = new Tray('/images/tray.png');
  //  创立用于托盘图标的上下文菜单
  contextMenu = Menu.buildFromTemplate([{
      label: '复制',
      role: 'copy'
    },
    {
      label: '剪切',
      role: 'cut'
    },
    {
      label: '粘贴',
      role: 'paste'
    }
  ]);
  //  设置托盘图标的提醒文本
  tray.setToolTip('这是 Electron 的利用托盘图标')
  //  将托盘图标与上下文菜单关联
  tray.setContextMenu(contextMenu)
  win.on('closed', () => {tray.destroy();
    win = null;
  });
}

app.on('ready', createWindow)
app.on('activate', () => {if (win === null) {createWindow();
  }
});

要害操作阐明如下：

应用 new Tray(image) 来创立利用托盘。
应用 setToolTip(toolTip) 为托盘增加 toolTip。
配置菜单，并应用 setContextMenu 将菜单和托盘关联， 这一步是必须操作，托盘图标必须具备上下文菜单时才会展现

演示成果如下：

windows 中成果：

Mac 中：

对于系统托盘 Tray 的更阐明和请参考官网文档系统托盘

不同零碎中交互不同的解决方案：

在 windows 中间接点击利用托盘是激活以后利用，右键点击才是展现托盘菜单。而 Mac 中通常左键点击即为展现托盘菜单，如果你须要你的利用在各个平台下均以有雷同的交互方式，可手动应用代码进行调整。波及如下几个事件和办法：

click 托盘单击时触发
right-click 托盘右键点击时触发
tray.popUpContextMenu([menu, position]) 弹出托盘图标的上下文菜单。如果传入了 menu 参数，将会弹出 menu 而不是托盘图标的上下文菜单, 参数 position 只在 Windows 上可用，并领有默认值 (0, 0)

利用托盘在 windows 零碎中有一个十分有用且常见的性能——气泡告诉，仅需应用托盘的 displayBalloon() 办法即可，演示如下：

tray.displayBalloon({// icon: './images/icon.png', // 告诉的图标 ( 可选) 
  title: '气泡告诉题目',
  content: '气泡告诉的内容'
});
tray.on('balloon-show', () => {console.log('气泡告诉显示');
});
//  增加气泡音讯单击事件
tray.on('balloon-click', () => {console.log('气泡告诉被用户点击');
});
//  增加气泡音讯敞开事件
tray.on('balloon-closed', () => {console.log('气泡通主动敞开');
});

气泡告诉还具备点击的性能，因而系统托盘还具备如下事件：

balloon-show，当气泡音讯显示时触发；
balloon-click，当单击气泡音讯时触发；
balloon-closed，当气泡音讯敞开时触发。

需注意的是：balloon-click 和 balloon-closed 是互斥的，两者仅会触发其中一个：单击气泡音讯后，气泡音讯会立即敞开，在这种状况下，并不会触发 balloon-closed 事件；balloon-closed 事件仅在气泡音讯显示几秒后主动敞开的状况下触发。

效果图如下：

以上就是 Electron 原生菜单罕用的应用办法阐明，想要理解更深刻的内容请参考如下内容：

Electron
Menu
MenuItem
Tray
nativeImage

正文完

electron

发表至： electron

2021-12-09

0

关于electron:Electron的用武之地

关于electron:Electron-使用Selenium和WebDriver

手动安装Electron踩坑

关于electron:从零开始的electron开发更新增量更新二

关于java:程序员跳槽是涨薪的最好途径否则到头来钱还不如新来的多

关于electron:Electron原生菜单

菜单类型

利用菜单

上下文菜单

托盘菜单

windows 的系统托盘的气泡告诉

站内搜索