5.菜单栏详解

一、前言

上一章介绍了非常多的窗口方面的内容，对于从来没有开发过GUI程序的同学来说，估计很难受。

比如事件是什么？

这是一种比较抽象的概念，和系统底层的消息机制很类似。

比如你对窗口的所有操作(鼠标滑动点击、键盘敲击)，事实上都会由系统发送对应的消息给程序，交由程序进行处理。

如果你想知道系统是如何工作的，可以参考文章windows编程入门，原生使用C++来创建一个windows窗口。

而Electron封装的非常彻底，并将其称之为事件(Event)，所以你看不到这些细节。

本章的目的并不是这些底层原理，感兴趣的可以自行了解，这里主要还是来介绍Electron中窗口的菜单栏如何使用。

虽然对于很多软件来说，都更倾向于自定义菜单栏（也就是直接禁用自带的菜单栏，自己绘制）。

但自绘菜单栏总的来说还是一个比较有点难度、且耗时间的事情，如果自带的菜单栏就能够满足我们的需求，用一用又何妨呢？

二、简单使用

首先我们要先将它用起来再谈细节的事情，所以先理一理使用菜单的逻辑：

1. 自定义菜单模板（其实就是数组）
2. 使用Menu类从模板构建菜单、并设置菜单

首先是自定义菜单模板，也就是定义一个数组：

//菜单模板
const myMenuTemplate = [
  {
    label: '文件',
    click:()=>{
      console.log("测试文件");
    }
  },
  {
    label: '编辑',
    click:()=>{
      console.log('测试编辑')
    }
  }
];

这种使用方法在js编程中非常常见，不习惯的话，就多看几遍、自己多写几遍。

上面的这个结构已经是我优化了大部分后的代码了，稍微解释一下。