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

系列文章目录

第一节 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模块。两种实现方法

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

 步骤：

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

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

3. 定义右键菜单 调用menuBuilder

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

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

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

总结

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

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

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

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