返回

自定义 Electron 菜单：在 Electron 应用中配置菜单项

前端

构建 Electron 应用菜单：自定义 Electron 菜单

前 言

菜单是应用程序不可或缺的一部分，因为它提供了一种有条理的方式来访问应用程序的功能和选项。在 Electron 中，菜单可以通过 Menu 模块创建和自定义。本 tutorial 将指导您完成在 Electron 应用中构建自定义菜单的每 - - 步。

创建 Electron 菜单

在 Electron 应用中创建菜单非常简单：

// 创建一个新的 Menu 实例
const menu = new Menu()

添加菜单项

菜单项是菜单中的可点击选项。要向菜单中添加菜单项，请使用 append 或 insert 函数：

// 添加一个菜单项
menu.append({
  label: '文件',
  click: () => {
    console.log('单击了文件菜单')
  }
})

// 在特定位置插入一个菜单项
menu.insert(1, {
  label: '编辑',
  click: () => {
    console.log('单击了编辑菜单')
  }
})

设置菜单项的类型和子菜单

菜单项可以是普通菜单项、子菜单或分隔符：

  • 普通菜单项： 可以点击并执行特定操作。
  • 子菜单： 包含其他菜单项的菜单项。
  • 分隔符： 将菜单项组分开。

要设置菜单项的类型，请使用 type 属性：

// 创建一个子菜单
const submenu = new Menu()
menu.append({
  label: '视图',
  type: 'SubMenu',
  menu: submenu
})

// 添加分隔符
menu.append({ type: 'Seperator' })

在 Electron 窗口中设置菜单

创建菜单后，您需要在 Electron 窗口中设置它：

// 获取 Electron 窗口的菜单栏
const menuBar = remote.Menu.getApplicationMenu()

// 将自定义菜单设置为菜单栏的菜单
menuBar.menu = menu

结语

自定义菜单是使 Electron 应用更具用户友好性和可控性的好方法。本 tutorial 提供了有关在 Electron 应用中创建和配置自定义菜单的分步指导。通过利用 Menu 模块，您将能够创建直观、个性化的菜单栏，从而为用户提供轻松访问应用程序功能和选项的方式。