electron开发入门（四）菜单和通知图标

目录：

1. 菜单Menu（应用菜单和context菜单）
2. 系统托盘图标Tray

1 菜单Menu（应用菜单和context菜单）

有两种菜单：应用程序（顶部）菜单和上下文（右键点击）菜单。

1.1 应用程序菜单

使用Menu和MenuItem模块可以自定义你的应用程序菜单。如果没有设置任何菜单，Electron将为您的应用生成一个最小的菜单。

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

每个菜单有一个或几个菜单项 menu items，并且每个菜单项可以有子菜单。

下面是一个简单的示例：

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

var template = [{
  label: '编辑',
  submenu: [{
    label: '撤销',
    accelerator: 'CmdOrCtrl+Z',
    role: 'undo'
  }, {
    label: '重做',
    accelerator: 'Shift+CmdOrCtrl+Z',
    role: 'redo'
  }, {
    type: 'separator'
  }, {
    label: '复制',
    accelerator: 'CmdOrCtrl+C',
    role: 'copy'
  }, {
    label: '粘贴',
    accelerator: 'CmdOrCtrl+V',
    role: 'paste'
  }]
}, {
  label: '帮助',
  role: 'help',
  submenu: [{
    label: '学习更多',
    click: function () {
      electron.shell.openExternal('http://electron.atom.io')
    }
  }]
}];

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})
  ......
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

1.2 创建上下文菜单

可以使用Menu和MenuItem模块创建上下文或者右键点击菜单。您可以右键单击此应用程序中的任何位置查看示例上下文菜单。

在这个示例中，我们使用ipcRenderer模块来展示从渲染器进程显示调用它的上下文菜单。

//main.js
const electron = require('electron')
const BrowserWindow = electron.BrowserWindow
const Menu = electron.Menu
const MenuItem = electron.MenuItem
const ipc = electron.ipcMain
const app = electron.app

const menu = new Menu()
menu.append(new MenuItem({ label: 'Hello' }))
menu.append(new MenuItem({ type: 'separator' }))
menu.append(new MenuItem({ label: 'Electron', type: 'checkbox', checked: true }))

app.on('browser-window-created', function (event, win) {
  win.webContents.on('context-menu', function (e, params) {
    menu.popup(win, params.x, params.y)
  })
})

ipc.on('show-context-menu', function (event) {
  const win = BrowserWindow.fromWebContents(event.sender)
  menu.popup(win)
})

//渲染进程

const ipc = require('electron').ipcRenderer

// 告诉主进程在单击示例按钮时显示菜单
const contextMenuBtn = document.getElementById('context-menu')
contextMenuBtn.addEventListener('click', function () {
  ipc.send('show-context-menu')
})

2.系统托盘图标Tray

微信启动时，系统托盘中会自动添加一个微信启动程序图标

image

使用electron如何实现这种效果昵？

以下是使用electron实现将应用程序加入系统托盘demo

//electron
const electron = require('electron');
const app = electron.app;

const path = require('path');

//用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 ，通常被添加到一个 context menu 上.
const Menu = electron.Menu;
const Tray = electron.Tray;

//托盘对象
var appTray = null;

function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 1000,
        height: 600,
    })
    //系统托盘右键菜单
    var trayMenuTemplate = [
        {
            label: '设置',
            click: function () {} //打开相应页面
        },
        {
            label: '帮助',
            click: function () {}
        },
        {
            label: '关于',
            click: function () {}
        },
        {
            label: '退出',
            click: function () {
                //ipc.send('close-main-window');
                 app.quit();
            }
        }
    ];

    //系统托盘图标目录
    trayIcon = path.join(__dirname, 'tray');

    appTray = new Tray(path.join(trayIcon, 'app.ico'));

    //图标的上下文菜单
    const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);

    //设置此托盘图标的悬停提示内容
    appTray.setToolTip('This is my application.');

    //设置此图标的上下文菜单
    appTray.setContextMenu(contextMenu);
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);


// Quit when all windows are closed.
app.on('window-all-closed', function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 ，通常被添加到一个 context menu 上。

以下是关键步骤：

    //图标的上下文菜单
    const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);

    //设置此图标的上下文菜单
    appTray.setContextMenu(contextMenu);