美文网首页Ionic4 开发
Ionic 4 配置App icon 和splash

Ionic 4 配置App icon 和splash

作者: Lingli_yu | 来源:发表于2019-07-10 14:54 被阅读0次

构建App配置app icon 和 splash是必须的步骤,通过ionic 构建hybrid app 同样需要配置,不过通过ionic cli 构建的项目则可以通过cli 轻松处理icon 和splash

config.xml

Ionic 项目中原生相关的配置,均在config.xml中,处于项目顶级目录中,分别有ios 和android:

 <platform name="android">
 ...
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
 ...
 </platform>

 <platform name="ios">
 ...
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
 ...
 </platform>
配置icon 和splash

当然可以在resources文件夹中修改对应的icon 和splash, 不过ionic cli 给我们提供了更方便的方式:
1.resources 文件中添加一张icon.png (1024x1024)
2.resources 文件中添加一张splash.png(2732x2732)

执行如下指令
ionic cordova resources
ionic cordova resources ios
ionic cordova resources android

ionic cli 会在resources 文件分别生成ios / android 对应的各种尺寸的ionic 和 splash,同时会更新config.xml文件。

当然为了splash 最好的体验,最好设计的一张中间是方正logo spalsh.
如果平台有特殊的icon 或 splash. 需要在resources 文件夹下建立存储各平台icon.png 或splash 的文件。例如,如果需要android 版本设置特殊的icon, 需要添加resources/android/icon.png。

相关文章

网友评论

    本文标题:Ionic 4 配置App icon 和splash

    本文链接:https://www.haomeiwen.com/subject/vckhkctx.html