electrondemo运行起来后,大家经常想修改electron的图标。那么在修改图标的过程中,又遇到了什么事情呢?大家可以看看苏南大叔的electron图标更换过程经验。

本次实验的基础是:win环境,electron+vuedemobuilder打包模式。

前言

首先,大家需要知道:electronico更换过程,是发生在最后的打包阶段,而不是开发过程中的。也就是说,大多数情况下,这个图标是打包的时候决定的。而electron的打包过程,可选的工具非常多。目前我们可能会在packagerbuilder之间进行选择。

其次,electronico,实际上也随系统不同而不同,有win版、mac版、linux版的区分,而普通的ico也可能是不能满足需求的,可能你需要做个特殊的套娃ico图标,才能在electron中正常显示。具体的ico制作过程,大家可以点击这里查看苏南大叔的文章:

制作ico

大家需要先制作好win下所使用的ico文件,这里的要点是:必须是ico后缀,png是不行的(mac下是icns文件)。套娃ico里面,应该至少有一个256*256尺寸的ico,标准的ico里面是有如下尺寸的:256/128/64/32/16 。否则您就可能会看到下面的错误情况。

electron 使用 builder 打包的时候,如何更换程序图标? - ico_04
electron 使用 builder 打包的时候,如何更换程序图标?(图10-1)

electron 使用 builder 打包的时候,如何更换程序图标? - ico_07
electron 使用 builder 打包的时候,如何更换程序图标?(图10-2)

electron 使用 builder 打包的时候,如何更换程序图标? - ico_16
electron 使用 builder 打包的时候,如何更换程序图标?(图10-3)

修改package.json

苏南大叔下一步要修改package.json里面的build字段里面的win相关的ico内容,指定新的ico文件。当然,如果你同名覆盖的话,就是不需要修改package.json文件的。默认的图标位置是:build文件下的icons文件夹(见截图)。win下使用的图标是:icon.ico。

electron 使用 builder 打包的时候,如何更换程序图标? - ico_02
electron 使用 builder 打包的时候,如何更换程序图标?(图10-4)

electron 使用 builder 打包的时候,如何更换程序图标? - ico_01
electron 使用 builder 打包的时候,如何更换程序图标?(图10-5)

查看效果

苏南大叔运行命令后,就可以看到相关效果了。

npm run build

electron 使用 builder 打包的时候,如何更换程序图标? - ico_13
electron 使用 builder 打包的时候,如何更换程序图标?(图10-6)

electron 使用 builder 打包的时候,如何更换程序图标? - ico_14
electron 使用 builder 打包的时候,如何更换程序图标?(图10-7)

electron 使用 builder 打包的时候,如何更换程序图标? - ico_15
electron 使用 builder 打包的时候,如何更换程序图标?(图10-8)

electron 使用 builder 打包的时候,如何更换程序图标? - ico_99
electron 使用 builder 打包的时候,如何更换程序图标?(图10-9)

electron 使用 builder 打包的时候,如何更换程序图标? - ico
electron 使用 builder 打包的时候,如何更换程序图标?(图10-10)

总结

根据使用的打包方式的不同,具体的修改ico的手段也是不一样的,但是都是可以定制ico的。苏南大叔带给大家的electron系列教程中,会陆续介绍其他的更换ico的方法。大家可以继续关注苏南大叔的electron的相关文章:https://newsn.net/tag/electron/

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

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

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

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!