跳转到主要内容

Dock 菜单

在 macOS 上，Dock 是一个界面元素，用于显示打开的和常用的应用程序。当应用程序被打开或固定时，每个应用程序在 Dock 中都有自己的图标。

注意

在 macOS 上，Dock 是某些跨平台功能的入口点，例如 最近使用的文档 和 应用程序进度。请阅读这些指南以获取更多详细信息。

Dock API​

所有 Dock 功能都通过 Dock 类暴露出来，该类通过 app.dock 属性提供。每个 Electron 应用程序只有一个 Dock 实例，并且此属性仅存在于 macOS 上。

您的应用程序 Dock 图标的主要用途之一是显示额外的应用程序菜单。Dock 菜单通过右键单击或 Ctrl-单击应用程序图标来触发。默认情况下，应用程序的 Dock 菜单会带有系统提供的窗口管理工具，包括显示所有窗口、隐藏应用程序以及在不同的打开窗口之间切换的功能。

要设置应用程序定义的自定义 Dock 菜单，请将任何 Menu 实例传递给 dock.setMenu API。

提示

有关如何使您的 Dock 菜单感觉更原生的最佳实践，请参阅 Apple 的 人机界面指南 页面上的 Dock 菜单部分。

附加上下文菜单​

设置 Dock 菜单
const { app, BrowserWindow, Menu } = require('electron/main')

// dock.setMenu only works after the 'ready' event is fired
app.whenReady().then(() => {
  const dockMenu = Menu.buildFromTemplate([
    {
      label: 'New Window',
      click: () => { const win = new BrowserWindow() }
    }
    // add more menu options to the array
  ])

  // Dock is undefined on platforms outside of macOS
  app.dock?.setMenu(dockMenu)
})
注意

与常规 上下文菜单 不同，Dock 上下文菜单不需要使用 menu.popup API 手动进行配置。相反，Dock 对象会为您处理点击事件。

提示

要了解有关在 Electron 中创建菜单的更多信息，请参阅 菜单 指南。

可运行的 Fiddle 演示​

以下是一个可运行的示例，展示了如何使用 Dock 菜单在您的 Electron 应用程序中创建和关闭窗口。

docs/fiddles/menus/dock-menu (40.0.0)在 Fiddle 中打开
const { app, BrowserWindow, Menu } = require('electron/main')
const { shell } = require('electron/common')

function createWindow () {
  const win = new BrowserWindow()
  win.loadFile('index.html')
}

function closeAllWindows () {
  const wins = BrowserWindow.getAllWindows()
  for (const win of wins) {
    win.close()
  }
}

app.whenReady().then(() => {
  createWindow()

  const dockMenu = Menu.buildFromTemplate([
    {
      label: 'New Window',
      click: () => { createWindow() }
    },
    {
      label: 'Close All Windows',
      click: () => { closeAllWindows() }
    },
    {
      label: 'Open Electron Docs',
      click: () => {
        shell.openExternal('https://electron.js.cn/docs')
      }
    }
    // add more menu options to the array
  ])

  app.dock.setMenu(dockMenu)

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})