乐趣区

关于前端:Electron实战之菜单与托盘

jiezi

菜单、托盘是桌面端利用必备的性能之一，咱们通常会在菜单上配置利用罕用的：偏好设置、显示暗藏、关上文件等性能，在托盘内设置：退出、重启、帮忙等辅助性性能，帮忙用户方便快捷地管制利用的一些零碎性能。系统托盘实际上也是一个菜单，通过点击鼠标触发。

一、利用菜单（Menu）

Electron 里的菜单大体上分为三类：利用菜单、上下文菜单和 Dock 菜单（仅针对 OSX 零碎）。这里以 VSCode 为例，来别离介绍这几种菜单的含意。关上 VSCode 编辑器，能够通过下图，很清晰地发现 3 个菜单所处的地位。

1.1 利用内菜单

原生利用菜单能够了解为利用窗口菜单，在 MacOS 上，选中利用后，利用内菜单呈现在桌面的左上方。在 Windows 和 Linux 上，Menu 将会被设置成窗口顶部菜单。在 Electron 中，通常会应用 Menu.setApplicationMenu(menu) 函数来设置利用内菜单。

import {Menu} from 'electron'


function createMenu () {
  const template = [
    {
      label: '菜单一',
      submenu: [
        {label: '性能一'},
        {label: '性能二'}
      ]
    },
    {
      label: '菜单二',
      submenu: [
        {label: '性能一'},
        {label: '性能二'}
      ]
    }
  ];
  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);
}

通过以上代码设置实现一个利用菜单后，在 macOS 下的成果如下。

能够看到第一个菜单的题目是 Electron 而不是咱们设置的题目 菜单一。这是因为：在 macOS 中应用程序菜单的第一个我的项目的标签总是你的应用程序的名字，无论你设置什么标签。如果你想展现成本人的题目，Electron 官网给了一种批改 Info.plist 的办法：About Information Property List Files。除此之外，你也能够从新批改一下 template 的格局：

if (process.platform === 'darwin') {
  template.unshift({label: app.getName(),
    submenu: [
      {
        label: 'Quit',
        click() {app.quit();
        }
      }
    ]
  });
}

这样，三个菜单就显示进去了，如下图所示。

上述代码中，对于 template 菜单项字段内有很多配置项，具体的字段也能够间接浏览官网文档，针对每个字段都有具体的解释。

1.2 上下文菜单（context menu）

上下文菜单（context menu）就是咱们通常说的右键菜单，须要留神的是：上下文菜单，须要在渲染过程中进行实现，能够通过 IPC 发送所需的信息到主过程，并让主过程代替渲染过程显示菜单，示例代码如下。

// 主过程 main/index.js
ipcMain.on('show-context-menu', (event) => {
  const template = [
    {
      label: '菜单一',
      click: () => {
        // 发送点击菜单一事件到渲染过程
        event.sender.send('context-menu-command', 'menu-item-1')
      }
    },
    {type: 'separator'},
    {
      label: '菜单二',
      type: 'checkbox',
      checked: true
    }
  ]
  const menu = Menu.buildFromTemplate(template)
  menu.popup({window: BrowserWindow.fromWebContents(event.sender)
  })
})

 

// 渲染过程 renderer/main.js
window.addEventListener("contextmenu", (e) => {e.preventDefault();
  electron.ipcRenderer.send("show-context-menu");
});
electron.ipcRenderer.on("context-menu-command", (e, command) => {// todo});

最终的运行成果如下图所示。

1.3 Dock 菜单（仅 MacOS 可用）

Dock 的菜单实现也是在主过程中，能够通过 app.dock.setMenu 这个 API 来间接创立。

// main.js
const createDockMenu = () => {
  const dockTempalte = [
    {
      label: '菜单一',
      click () {console.log('New Window');
      }
    }, {
      label: '菜单二',
      submenu: [{ label: 'Basic'},
        {label: 'Pro'}
      ]
    },
    {label: '其余...'}
  ];


  const dockMenu = Menu.buildFromTemplate(dockTempalte);
  app.dock.setMenu(dockMenu);
}

运行成果如下图。

二、利用托盘（Tray）

实现利用托盘次要依靠于 Electron 的 Tray 模块，在 MacOS 和 Ubuntu，托盘将位于屏幕右上角上，凑近你的电池和 wifi 图标。在 Windows 上，托盘通常位于右下角。

通过以上图片能够清晰地看到创立一个托盘须要筹备一个图标用于显示，以及一个菜单项用于出现所需的性能菜单。咱们来看一下 Windows 下一个简略的利用托盘的实现形式：

// 主过程
import {app, Menu, Tray} from 'electron';


let tray = new Tray('public/icon.ico');
const contextMenu = Menu.buildFromTemplate([
  {
    label: '退出',
    click: function(){app.quit();
    }
  }
]);
tray.setToolTip('利用题目');
tray.setContextMenu(contextMenu);

在 Rubick 中，利用托盘实现的源码链接：https://github.com/rubickCenter/rubick

退出移动版