一、前言
上一章介绍了非常多的窗口方面的内容,对于从来没有开发过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
脚本编程的内容,不熟悉的可以自己浏览器搜一搜、学一学。