ionic實戰(zhàn)-更改app圖標(Icons)和啟動畫面(Splash screens)

背景

  • app默認的icon和splash是cordova的圖標(機器人圖標)
  • 在app根目錄resources文件夾下存在的icon和splash是ionic的圖標

  • 我們要使用自己的icon和splash


先用ionic提供的icon和splash代替cordova的機器人

  • 既然項目根目錄resources文件夾已經有了ionic提供的icon和splash,為什么打包的.apk還是cordova的機器人
  • 原因一:沒有執(zhí)行命令ionic resources,執(zhí)行后會在config.xml文件中生成對icon和splash對引用,如下圖
  • 原因二:cordova版本6.4.0有bug,把生成的資源文件放錯位置了,詳情看這里

使用我們自己制作的icon和splash

方式一

  • 項目根目錄resources文件夾已經有了ionic提供的icon和splash,讓美工做一套大小和數(shù)量一樣的替換它就行
  • 沒有執(zhí)行過ionic cordova resources命令的,就執(zhí)行一下

方式二

  • 在resources文件夾下放一張大小為1024*1024名字為icon的圖標文件、一張大小為2208*2208(ionic3.x大小為2732*2732)名字為splash的啟動畫面文件,格式可以為png、psd或ai,然后執(zhí)行ionic cordova resources,則會把這兩張圖上傳到ionic服務器,然后生成不同尺寸的icon和splash.如下圖.

最后

  • 最新ionic cli生成resources需要注冊ionic帳號并登錄
  • 分別生成android和ios
ionic cordova resources android
ionic cordova resources ios
  • 很多時候執(zhí)行ionic cordova resources失敗,都是網絡問題,建議用4g流量,或者分別執(zhí)行ionic cordova resources --icon和ionic cordova resources --splash
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容