Electron-学习笔记(3)

578 阅读1分钟

1.任务栏进度条

进度条使窗口能够向用户提供其进度信息,而无需被切换到前台。

image.png

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系统 上可用。

示例代码

效果图

image.png

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

右击我们的应用程序的图标,此刻就会看见我们创建的三个自定义菜单