1.任务栏进度条
进度条使窗口能够向用户提供其进度信息,而无需被切换到前台。
BrowserWindow实例下的setProgressBar()方法。 此方法以介于 0 和 1 之间的小数表示进度。 例如,如果有一个耗时很长的任务,它当前的进度是64%,那么你可以用setProgressBar(0.64)来显示这一进度。
将参数设置为负值 (例如, -1) 将删除progress bar。 设定值大于 1 在 Windows 中将表示一个不确定的进度条 ,或在其他操作系统中显示为 100%。
代码示例
const { app, BrowserWindow } = require('electron')
let progressInterval
function createWindow () {
const win = new BrowserWindow({ width: 800, height: 600 }
) win.loadFile('index.html')
const INCREMENT = 0.03
const INTERVAL_DELAY = 100 // ms
let c = 0
progressInterval = setInterval(() => {
win.setProgressBar(c)
if (c < 2) c += INCREMENT else c = 0
}, INTERVAL_DELAY) }
app.whenReady().then(createWindow)
app.on('before-quit', () => {
clearInterval(progressInterval) })
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') { app.quit() } })
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) { createWindow()
} })
启动 Electron 应用程序后,Dock (macOS) 或 taskbar (Windows, Unity) 应该显示一个进度条, 从零开始, 到100%到完成
2.自定义 Dock 菜单
Electron提供API来配置macOS Dock中的应用程序图标,要设置您的自定义 dock 菜单,您需要使用app.dock.setmenuAPI,它仅在 macOS系统 上可用。
示例代码
效果图
const { app, BrowserWindow, Menu } = require('electron')
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(() => { if (process.platform === 'darwin') { 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() } })
右击我们的应用程序的图标,此刻就会看见我们创建的三个自定义菜单