electron菜单自定义退出程序_学透 Electron 自定义菜单

导语：近几年，随着 Electron/ NW.js 等技术的兴起，也催生了一批优秀的桌面端开发者工具，比如 VSCode、微信开发者工具、飞冰(ICE) 等等。对于开发者而言，桌面端开发者工具的优势是：可视化能力、操作系统层面的 API 访问、和良好的开发调试体验。因此，最近准备系统性的深入学习下 Electron 技术并且将学习的知识进行适当沉淀。本篇文章主要总结 Electron 的自定义菜单。

传统的 Web APP 的开发基本上不会涉及到菜单，但是在 Electron 里面它提供了对于菜单全面的控制，你可以通过 Menu、MenuItem 模块来创建应用所需的自定义菜单。这篇文章我们一起探讨下 Electron 中有哪些菜单种类，又是如何通过代码去自定义菜单的？

首先，我们一起看看基本的菜单介绍，方便大家对于基本的概念有初步的认识。

菜单介绍

Electron 里的菜单大体上分为三类：应用菜单、上下文菜单和 Dock 菜单（仅针对 OSX 系统）。

这里以微信开发者工具为例（微信开发者工具基于 NW.js 进行开发，主要出于 Windows XP兼容性考虑），来分别介绍这几种菜单的含义。打开微信开发者工具，可以通过下图，很清晰的发现3个菜单所处的位置。

这三种菜单的含义分别是： 应用菜单：应用菜单通常位于应用程序的顶部，提供了用户可能用到的各种操作，如程序的快捷方式、常用的文件夹及系统命令等。 上下文菜单：在应用里面点击右键看到的菜单。 * Dock 菜单：只在 OSX 系统才有，通常功能较少，提供特别常用的功能。

了解了菜单的基本概念后，接下来我们一起看看如何通过代码去实现自定义菜单的功能。

应用菜单

首先看看应用菜单，Electron 默认会有一个标准的应用菜单，我们一起看看默认的应用菜单效果：

仔细分析下默认应用菜单包括的菜单结构如下：

如果你希望定制应用菜单，你需要自行实现整个菜单的定义。这里需要注意，应用菜单只能在 Electron 的主进程中进行访问。例如：

// main.js
const {
    app,
    Menu
 } = require('electron');

app.on('ready', () => {
    const appMenu = Menu.buildFromTemplate(menuTemplate);
    Me