跳转到主要内容

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 的 Human Interface Guidelines 中有关 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 (39.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()
})