Skip to main content

Dock 菜单

🌐 Dock Menu

在 macOS 上，Dock 是一个界面元素，用于显示已打开和常用的应用。无论是打开的还是固定的，每个应用在 Dock 中都有自己的图标。

🌐 On macOS, the Dock is an interface element that displays open and frequently-used apps. While opened or pinned, each app has its own icon in the Dock.

note

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

Dock API​

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

🌐 All functionality for the Dock is exposed via the Dock class exposed via app.dock property. There is a single Dock instance per Electron application, and this property only exists on macOS.

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

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

🌐 To set an app-defined custom Dock menu, pass any Menu instance into the dock.setMenu API.

tip

有关使 Dock 菜单更符合本地使用习惯的最佳实践，请参见苹果的 人机界面指南 中关于 Dock 菜单的页面。

附加上下文菜单​

🌐 Attaching a context menu

Setting a Dock menu
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)
})
note

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

tip

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

可运行的 Fiddle 演示​

🌐 Runnable Fiddle demo

下面是一个可运行的示例，演示如何在你的 Electron 应用中使用 Dock 菜单来创建和关闭窗口。

🌐 Below is a runnable example of how you can use the Dock menu to create and close windows in your Electron app.

docs/fiddles/menus/dock-menu (40.6.0)Open in 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://electronjs.org/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()
})