Electron设置窗口图标、设置桌面快捷方式图标
一、前言
在開(kāi)發(fā)一款桌面應(yīng)用時(shí)，設(shè)置窗口圖標(biāo)和桌面快捷方式圖標(biāo)是兩個(gè)必須的需求。下面來(lái)看看我基于Electron開(kāi)發(fā)的實(shí)際項(xiàng)目中是如何配置最終實(shí)現(xiàn)了這個(gè)需求吧。
二、實(shí)現(xiàn)設(shè)置窗口圖標(biāo)和桌面快捷方式圖標(biāo)
1、準(zhǔn)備好你的Icon圖標(biāo)
要得到一個(gè)icon圖標(biāo)十分簡(jiǎn)單，你需要有一張目標(biāo)圖標(biāo)的png格式圖片，然后找一個(gè)可以免費(fèi)在線轉(zhuǎn)換icon圖標(biāo)的網(wǎng)站轉(zhuǎn)換下載即可，這里我提供一個(gè)我用過(guò)的很不錯(cuò)的在線轉(zhuǎn)換工具：在線轉(zhuǎn)換icon圖標(biāo)工具。
這里需要說(shuō)明一下，有的童鞋可能在糾結(jié)轉(zhuǎn)換成多大的圖標(biāo)才可以呢？
我的快捷方式圖標(biāo)尺寸是256×256，不過(guò)64×64、128×128的都行，建議快捷方式的圖標(biāo)不要尺寸太秀珍。
那么窗口圖標(biāo)可以使用多大的呢？經(jīng)過(guò)我的嘗試，20×20、32×32、64×64的都可以正常顯示，窗口圖標(biāo)和桌面快捷方式圖標(biāo)可以使用同一個(gè)尺寸的，也就是最大256×256。我的窗口圖標(biāo)選用的是20×20的。
2、代碼配置
由于Electron中這兩個(gè)圖標(biāo)是分開(kāi)配置的，所以由兩個(gè)地方需要進(jìn)行配置。分別是：
01、package.json中，這里配置的是控制打包后的桌面快捷方式的圖標(biāo)：
02、在主進(jìn)程文件index.js（可能你的主進(jìn)程文件叫main.js或者別的，總之領(lǐng)會(huì)精神就好，哈哈哈），這里配置的是窗口圖標(biāo)：
mainWindow = new BrowserWindow({...... // 因?yàn)檫@篇文章重點(diǎn)講解圖標(biāo)配置，所以此處省略別的配置代碼height: 600,width: 1020,// 下面這行代碼就是配置窗口圖標(biāo)的核心代碼了icon: path.join(__dirname, './XXX/logo20.ico'), // 注意，這里的path是一個(gè)node模塊哦，需要npm安裝并且引入使用。最直接的作用就是拼接字符串。})3、實(shí)現(xiàn)需求
經(jīng)過(guò)上面的步驟，不出意外的話，你本地啟動(dòng)項(xiàng)目應(yīng)該已經(jīng)可以看到窗口圖標(biāo)已經(jīng)變成你想要的樣子了，這個(gè)不需要打包即可看到效果。另外的快捷方式的圖標(biāo)需要你使用打包工具進(jìn)行打包后安裝即可看到效果。
三、效果展示（圖片）
1、窗口圖標(biāo)效果
當(dāng)一切沒(méi)有問(wèn)題后這塊的圖標(biāo)就是你的目標(biāo)圖標(biāo)了
出現(xiàn)這個(gè)情況的有3種可能：1、你沒(méi)有在主進(jìn)程index.js中設(shè)置窗口圖標(biāo)配置；2、你的圖標(biāo)格式不是icon格式；3、你配置的icon路徑不對(duì)
2、快捷方式效果
哈哈，大名頂頂?shù)腣S Code也是electron做的，我只是借用舉個(gè)栗子。
參考鏈接
Electron官網(wǎng)文檔
electorn更換窗口圖標(biāo)
歡迎大家一起討論、學(xué)習(xí)
總結(jié)
以上是生活随笔為你收集整理的Electron设置窗口图标、设置桌面快捷方式图标的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 李沐动手学深度学习V2-BERT微调和代
- 下一篇： 牛文文点评长租公寓行业：过度金融化会毁灭