5. 菜单栏详解

一、前言

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

比如事件是什么?

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

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

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

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

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

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

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

二、简单使用

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

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

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

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

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

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

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

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

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

  1. label:这个菜单项的名字。
  2. click:当用户点击这个菜单项时,执行什么函数(这里写的箭头函数)。

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

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

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

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

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

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

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

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

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

此时代码如下:

image-20230925094318502

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

chcp 65001 && npm run start

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

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

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

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

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux