2025年第七节 Electron顶部菜单及右键菜单

大家好，我是讯享网，很高兴认识大家。

系列文章目录

第二节创建electron项目并启动

第三节 Electron运行流程、主进程渲染进程并使用nodejs

第四节 Electron 调用H5事件结合node模块fs 实现文件拖拽读取

第五节 Electron 模块介绍 remote模块详细介绍

第六节 Electron安全策略

前言

今天说说顶部菜单和右键菜单，顶部菜单electron默认就有不过是英文的。右键可没有需要自己搞。我们看下默认的顶部菜单（如下图1），修改后效果如图2。

实现方法

这节我们用到了Menu模块。它可以用来创建原生菜单，可用作应用菜单和 context 菜单。这个模块是主进程的一个模块，并且可以通过 remote 模块给渲染进程调用。

一、环境及页面搭建

环境搭建见第二节

页面：在根目录下新建ipcMain文件夹新建menu.js文件

二、顶部菜单

1、在menu.js引入Menu模块

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

讯享网

2、定义菜单在这块可以丰富你的菜单比如快捷键点击事件等。

API：Menu | ElectronCreate native application menus and context menus.https://www.electronjs.org/zh/docs/latest/api/menu

讯享网const menuTemplate = [ { label:"文件" }, { label:"编辑" }, ]

3、调用buildFromTemplate传入自定义菜单

const menuBuilder = Menu.buildFromTemplate(menuTemplate)

4、设置菜单setApplicationMenu

讯享网Menu.setApplicationMenu(menuBuilder)

5、主进程引入menu.js

 require('./ipcMain/menu')

6、完整menu.js代码

const { Menu } = require("electron"); const menuTemplate = [ { label:"文件", // 菜单名 submenu:[ // 二级菜单 { label:'新建', accelerator:'ctrl+n', // 快捷键 click:()=>{ // 点击事件 console.log("create file") } }, {type: 'separator'}, // 分割线 { label:'打开', }, { label:'保存', } ], }, { label:"编辑", submenu:[ { label:'复制', role:'copy', // 快捷键与系统冲突时可以使用role属性指定 click:()=>{ console.log("copy") } }, { label:'粘贴', role:'paste', click:()=>{ console.log("paste") } }, { label:'保存', } ], }, ] const menuBuilder = Menu.buildFromTemplate(menuTemplate) Menu.setApplicationMenu(menuBuilder)

三、右键菜单

实现逻辑：监听鼠标右键点击事件调用主进程的Menu模块。两种实现方法

使用@electron/remote模块(本节课使用方法)
主进程和渲染进程之间通信（项目中推荐的）

步骤：

remote模块安装、主进程引入、初始化并启用具体使用方法可参照第五节

渲染进程引入Menu模块

const remote = require("@electron/remote") const Menu = remote.Menu

定义右键菜单调用menuBuilder

const menuContextTemplate = [ { label:"编辑", submenu:[ { label:'复制', role:'copy', // 快捷键与系统冲突时可以使用role属性指定 }, { label:'粘贴', role:'paste', }, { label:'保存', } ], }, ] const menuBuilder = Menu.buildFromTemplate(menuContextTemplate)

监听右键点击事件并阻止默认事件调用menuBuilder.popup事件

window.onload = ()=>{ window.addEventListener("contextmenu",(e)=>{ console.log("鼠标点击了右键") e.preventDefault() menuBuilder.popup( { window:remote.getCurrentWindow() } ) },false) }

总结

以上就是今天要讲的内容，主要思路就是利用remote模块调用主进程模块。

每天记录一点，助力成长！

欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。

如果你觉得本文对你有帮助，欢迎点赞收藏转载，烦请注明出处，谢谢！