苏南大叔在本文中对任务栏图标闪动的情况进行总结,在mac系统下,这个效果是相当不错的。当electron程序完成了一些操作之后,需要提醒用户操作完成了,就可以使用本文中的electron相关函数,来对用户进行提示。

苏南大叔:electron程序,如何闪动任务栏图标以引起用户注意? - electron-jump-icon
electron程序,如何闪动任务栏图标以引起用户注意?(图8-1)

本文测试环境:macelectron5.0.7

激活窗体

代码如下:

mainWindow.showInactive();

如果electron当前的主窗体mainWindow,并处于未激活(最小化)状态。那么,这个代码就可以主动激活聚焦到主窗体。否则的话,啥作用也木有,可以完全忽视。

苏南大叔:electron程序,如何闪动任务栏图标以引起用户注意? - electron-showinactive
electron程序,如何闪动任务栏图标以引起用户注意?(图8-2)

图标跳跃/闪动

代码如下:

mainWindow.flashFrame(true);

这个代码flashFrame(true)生效的前提也是:

  • mac:主窗体mainWindow并不是在激活状态,就是说在最小化状态。
  • win10中,不要求窗体最小化,两者并不影响。

苏南大叔:electron程序,如何闪动任务栏图标以引起用户注意? - mac-flashFrame
electron程序,如何闪动任务栏图标以引起用户注意?(图8-3)

表现样式:

  • win10下,表现形式是:任务栏上面的对应任务在不断闪动。
  • mac上,表现样式是:dock上对应的图标,会上下跳动一次。

苏南大叔:electron程序,如何闪动任务栏图标以引起用户注意? - win-flashFrame
electron程序,如何闪动任务栏图标以引起用户注意?(图8-4)

相关链接:
https://newsn.net/say/electron-flashframe.html

苏南大叔:electron程序,如何闪动任务栏图标以引起用户注意? - flashFrame-mac-vs-win
electron程序,如何闪动任务栏图标以引起用户注意?(图8-5)

图标跳跃(下载图标)

效果是:mac系统下,底部dock的右侧下载图标,会自动跳跃一次。

// const { app,BrowserWindow } = require('electron')
// app.dock.downloadFinished(item.getSavePath());
const filePath = path.join(app.getPath('downloads'), "123.zip");
app.dock.downloadFinished(filePath);

苏南大叔:electron程序,如何闪动任务栏图标以引起用户注意? - mac-downloadfinished
electron程序,如何闪动任务栏图标以引起用户注意?(图8-6)

特性:mac专有

app.dockmac系统独有的,所以这个代码在非mac系统上,是会报错的。所以,可以稍稍改进一下:

if (process.platform == 'darwin') {
  //app.dock.downloadFinished("/Users/sunan/Downloads/1.jpg");
  const filePath = path.join(app.getPath('downloads'), "123.zip");
  app.dock.downloadFinished(filePath);
}

苏南大叔:electron程序,如何闪动任务栏图标以引起用户注意? - win-app-dock-error
electron程序,如何闪动任务栏图标以引起用户注意?(图8-7)

要求1:dock中存在"下载"图标

mac系统上的时候,需要dock栏中,有下载这个特殊的icon。如果没有的话,需要从访达的左侧菜单中,给拖拽到dock下来。具体见下图:

苏南大叔:electron程序,如何闪动任务栏图标以引起用户注意? - down-icon-drag
electron程序,如何闪动任务栏图标以引起用户注意?(图8-8)

要求2:代码传入下载目录的路径

const filePath = path.join(app.getPath('downloads'), "123.zip");
app.dock.downloadFinished(filePath)

filePath必须包含有下载目录的路径字符串,才算是个合格的参数。并且,如果最终的文件,比如:123.zip实际上并不存在的话,也是没有问题的。所以,这里特别案例一个获取系统下载目录路径的函数:

app.getPath('downloads')

相关链接:

总结

本文中,苏南大叔主要讲述electron程序,引起用户注意,进行下一步操作的几个可能性代码操作。当然,哪个操作适合您,还请根据实际情况选用。

更多electron相关经验文字,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章: