Electron教程-5. 菜单栏详解

一、前言

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

比如事件是什么？

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

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

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

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

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

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

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

二、简单使用

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

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

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

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

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

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

myMenuTemplate变量就是一个数组，只不过这个数组中的每个元素都是一个对象，比如第一个对象：

  {
    label: '文件',
    click:()=>{
      console.log("测试文件");
    }
  }

然后这个对象中就会有一些属性，这里写了两个最基本的属性：

label：这个菜单项的名字。
click：当用户点击这个菜单项时，执行什么函数（这里写的箭头函数）。

所以上面整个的意思其实就是设置了两个菜单项数组而已。

有了菜单项模板后，我们就可以根据这个模板来创建真正的菜单了。

使用到的类为Menu，可以参照上一章的方法，自己看一看如何使用。

首先第一步就是引入这个类：

const {Menu } = require('electron');

然后就是用这个类中的静态方法buildFromTemplate来创建一个实例：

//调用静态方法，根据模板创建菜单实例
const menu=Menu.buildFromTemplate(myMenuTemplate);

最后再调用这个类的静态方法setApplicationMenu设置应用程序的菜单:

//调用静态方法，设置应用程序的菜单
Menu.setApplicationMenu(menu);

此时代码如下：

对于需要使用console.log打印中文字符的情况，请使用下面这个命令启动应用：

chcp 65001 && npm run start

因为electron默认使用的是utf-8编码，而windows系统默认使用的是ANSI，在中文环境下一般都是gbk或者gb2312，两者编码不同就会导致乱码的情况，不理解的可以参考文章编码。

这里的chcp 65001就是切换编码页的意思，UTF-8的编码页为65001，然后中间用&&符号连接后面的启动命令。

意思就是，如果前面命令执行成功了，就继续执行后面的命令，如果前面命令执行失败了，后面的命令就不会执行。

这属于windows脚本编程的内容，不熟悉的可以自己浏览器搜一搜、学一学。

5. 菜单栏详解

一、前言

二、简单使用

文章目录