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.

[!注意] 在 macOS 上，Dock 是某些跨平台功能（如 最近的文档 和 应用进度）的入口点。阅读这些指南了解更多详情。

¥[!NOTE] On macOS, the Dock is the entry point for certain cross-platform features like Recent Documents and Application Progress. Read those guides for more details.

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 菜单通过右键单击或单击应用图标来触发。默认情况下，应用的 Dock 菜单会自带系统提供的窗口管理工具，包括显示所有窗口、隐藏应用以及在打开的不同窗口之间切换的功能。

¥One of the main uses for your app's Dock icon is to expose additional app menus. The Dock menu is triggered by right-clicking or Ctrl-clicking the app icon. By default, the app's Dock menu will come with system-provided window management utilities, including the ability to show all windows, hide the app, and switch betweeen different open windows.

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

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

[!TIP] 有关使 Dock 菜单感觉更原生的最佳实践，请参阅 Apple 的 人机界面指南 页面（关于 Dock 菜单）。

¥[!TIP] For best practices to make your Dock menu feel more native, see Apple's Human Interface Guidelines page on Dock menus.

附加上下文菜单​

¥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)
})

[!注意] 与常规 上下文菜单 不同，Dock 上下文菜单不需要使用 menu.popup API 手动检测。Dock 对象会替你处理点击事件。

¥[!NOTE] Unlike with regular context menus, Dock context menus don't need to be manually instrumented using the menu.popup API. Instead, the Dock object handles click events for you.

[!TIP] 要了解更多关于在 Electron 中制作菜单的信息，请参阅 菜单 指南。

¥[!TIP] To learn more about crafting menus in Electron, see the Menus guide.

可运行的 Fiddle 演示​

¥Runnable Fiddle demo

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

¥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 (38.1.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()
})