Cordova 自定义APP启动页

cordova-plugin-splashscreen

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

Installation

cordova plugin add cordova-plugin-splashscreen

Android APP 设置自定义启动页

项目根目录下的 config.xml 文件中添加自定义启动页配置项 <splash density="land-hdpi" src="res/android/screen/splash-land-hdpi.png" /> ,配置对应图片路径. res在 cordova 项目根目录下

terminal

w@w:~/my/project/app/res/android/screen$ ll
total 616
drwxr-xr-x 2 w w  4096 Jan 12 15:15 ./
drwxr-xr-x 3 w w  4096 Jan 12 14:56 ../
-rw-rw-r-- 1 w w 75191 Jan 12 13:28 splash-land-hdpi.png
-rw-rw-r-- 1 w w 75191 Jan 12 13:28 splash-land-ldpi.png
-rw-rw-r-- 1 w w 75191 Jan 12 13:28 splash-land-mdpi.png
-rw-rw-r-- 1 w w 75191 Jan 12 13:28 splash-land-xhdpi.png
-rw-rw-r-- 1 w w 75191 Jan 12 13:28 splash-port-hdpi.png
-rw-rw-r-- 1 w w 75191 Jan 12 13:28 splash-port-ldpi.png
-rw-rw-r-- 1 w w 75191 Jan 12 13:28 splash-port-mdpi.png
-rw-rw-r-- 1 w w 75191 Jan 12 13:28 splash-port-xhdpi.png
w@w:~/my/project/app/res/android/screen$ pwd
/home/w/my/project/app/res/android/screen

config.xml

<platform name="android">
    <allow-intent href="market:*" />
    <icon density="ldpi" src="res/android/ldpi.png" />
    <icon density="mdpi" src="res/android/mdpi.png" />
    <icon density="hdpi" src="res/android/hdpi.png" />
    <icon density="xhdpi" src="res/android/xhdpi.png" />
    <icon density="xxhdpi" src="res/android/xxhdpi.png" />
    <icon density="xxxhdpi" src="res/android/xxxhdpi.png" />
    <preference name="StatusBarOverlaysWebView" value="true" />
    <preference name="StatusBarStyle" value="styleDefault" />

    <splash density="land-hdpi" src="res/android/screen/splash-land-hdpi.png" />  
    <splash density="land-ldpi" src="res/android/screen/splash-land-ldpi.png" />  
    <splash density="land-mdpi" src="res/android/screen/splash-land-mdpi.png" />  
    <splash density="land-xhdpi" src="res/android/screen/splash-land-xhdpi.png" />  
    <splash density="port-hdpi" src="res/android/screen/splash-port-hdpi.png" />  
    <splash density="port-ldpi" src="res/android/screen/splash-port-ldpi.png" />  
    <splash density="port-mdpi" src="res/android/screen/splash-port-mdpi.png" />  
    <splash density="port-xhdpi" src="res/android/screen/splash-port-xhdpi.png" />
</platform>

IOS

方案一

启动页自定义, 在cordova项目目录下 app/platforms/ios/project-name/Images.xcassets/LaunchImage.launchimage 按照对应尺寸替换默认机器人图片即可, 图片名称对应Contents.json 文件,如果新增或删除图片,调整 Contents.json 文件即可

w@w:~/my/project/app/platforms/ios/soober/Images.xcassets/LaunchImage.launchimage$ ll
total 828
drwxr-xr-x 2 w w   4096 Jan 13 17:50  ./
drwxr-xr-x 5 w w   4096 Dec 31 11:26  ../
-rw-r--r-- 1 w w   4306 Dec 31 11:26  Contents.json
-rw-rw-r-- 1 w w  90366 Jan 13 17:36  Default-2436h.png
-rw-rw-r-- 1 w w  29059 Jan 13 17:44 'Default@2x-iphone.png'
-rw-rw-r-- 1 w w  32578 Jan 13 17:31 'Default-568h@2x~iphone.png'
-rw-rw-r-- 1 w w  40155 Jan 13 17:33  Default-667h.png
-rw-rw-r-- 1 w w  92205 Jan 13 17:34  Default-736h.png
-rw-rw-r-- 1 w w  10974 Jan 13 17:45  Default~iphone.png
-rw-rw-r-- 1 w w 112614 Jan 13 17:37  Default-Landscape-2436h.png
-rw-rw-r-- 1 w w 111953 Jan 13 17:37 'Default-Landscape@2x~ipad.png'
-rw-rw-r-- 1 w w 108873 Jan 13 17:36  Default-Landscape-736h.png
-rw-rw-r-- 1 w w  38324 Jan 13 17:39  Default-Landscape~ipad.png
-rw-rw-r-- 1 w w 103836 Jan 13 17:40 'Default-Portraint@2x~ipad.png'
-rw-rw-r-- 1 w w  35176 Jan 13 17:43  Default-Portraint~ipad.png
w@w:~/my/project/app/platforms/ios/project-name/Images.xcassets/LaunchImage.launchimage$ pwd
/home/w/my/project/app/platforms/ios/project-name/Images.xcassets/LaunchImage.launchimage

方案二

和 Android 一样配置到 res 对应的目录, 然后添加对应的配置图片

https://cordova.apache.org/docs/en/9.x/reference/cordova-plugin-splashscreen/index.html#page-toc-source

<platform name="ios">
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
</platform>

方案三

在 Xcode 中打开打包好的 IOS 项目, 在General 里面的 App Icons and Launch Images 设置 Launch Screen File, 在 Resources/Imagexcassets 目录下拖拽对应的启动页图片, 然后运行模拟器看效果进行调试.