跳到主要内容

Dock

Electron 提供了一些 API 来配置应用在 macOS Dock 中的图标。存在一个仅 macOS 可用的 API 来创建自定义 Dock 菜单,但 Electron 也将应用 Dock 图标用作跨平台功能的入口点,例如最近文档应用进度

自定义 Dock 通常用于添加用户不想为此打开整个应用窗口的任务快捷方式。

Terminal.app 的 Dock 菜单

Dock Menu

要设置自定义 Dock 菜单,你需要使用app.dock.setMenu API,此 API 仅在 macOS 上可用。

const { app, BrowserWindow, Menu } = require('electron/main')

function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})

win.loadFile('index.html')
}

const dockMenu = Menu.buildFromTemplate([
{
label: 'New Window',
click () { console.log('New Window') }
}, {
label: 'New Window with Settings',
submenu: [
{ label: 'Basic' },
{ label: 'Pro' }
]
},
{ label: 'New Command...' }
])

app.whenReady().then(() => {
app.dock?.setMenu(dockMenu)
}).then(createWindow)

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

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

启动 Electron 应用后,右键单击应用图标。你应该会看到刚刚定义的自定义菜单

macOS dock menu