导语:近几年,随着 Electron/ NW.js 等技术的兴起,也催生了一批优秀的桌面端开发者工具,比如 VSCode、微信开发者工具、飞冰(ICE) 等等。对于开发者而言,桌面端开发者工具的优势是:可视化能力、操作系统层面的 API 访问、和良好的开发调试体验。因此,最近准备系统性的深入学习下 Electron 技术并且将学习的知识进行适当沉淀。本篇文章主要总结 Electron 的自定义菜单。
传统的 Web APP 的开发基本上不会涉及到菜单,但是在 Electron 里面它提供了对于菜单全面的控制,你可以通过 Menu、MenuItem 模块来创建应用所需的自定义菜单。这篇文章我们一起探讨下 Electron 中有哪些菜单种类,又是如何通过代码去自定义菜单的?
首先,我们一起看看基本的菜单介绍,方便大家对于基本的概念有初步的认识。
菜单介绍
Electron 里的菜单大体上分为三类:应用菜单、上下文菜单和 Dock 菜单(仅针对 OSX 系统)。
这里以微信开发者工具为例(微信开发者工具基于 NW.js 进行开发,主要出于 Windows XP兼容性考虑),来分别介绍这几种菜单的含义。打开微信开发者工具,可以通过下图,很清晰的发现3个菜单所处的位置。
![bca6414e2999a8ae28b6b32f4aba8a38.png](https://i-blog.csdnimg.cn/blog_migrate/58316074af17e30ec1a2944277bda371.jpeg)
这三种菜单的含义分别是: 应用菜单:应用菜单通常位于应用程序的顶部,提供了用户可能用到的各种操作,如程序的快捷方式、常用的文件夹及系统命令等。 上下文菜单:在应用里面点击右键看到的菜单。 * Dock 菜单:只在 OSX 系统才有,通常功能较少,提供特别常用的功能。
了解了菜单的基本概念后,接下来我们一起看看如何通过代码去实现自定义菜单的功能。
应用菜单
首先看看应用菜单,Electron 默认会有一个标准的应用菜单,我们一起看看默认的应用菜单效果:
![5d68a7471266c9771fa88e9fb04fff2a.png](https://i-blog.csdnimg.cn/blog_migrate/05717d604b27d01446eb42a1d74c7ce6.jpeg)
仔细分析下默认应用菜单包括的菜单结构如下:
![aac9da6dac94bef68064f7fb1d355624.png](https://i-blog.csdnimg.cn/blog_migrate/6fa1620fbdc5cd1ea11374f94ee317ce.jpeg)
如果你希望定制应用菜单,你需要自行实现整个菜单的定义。这里需要注意,应用菜单只能在 Electron 的主进程中进行访问。例如:
// main.js
const {
app,
Menu
} = require('electron');
app.on('ready', () => {
const appMenu = Menu.buildFromTemplate(menuTemplate);
Me