第二章 第一节 Vue+Cordova的App启动页，图标，状态

在使用Webapp开发过程中，会发现与其他的优质APP相比，外观上差异很大。以下是我大致开发App的各种修改样式记录：
更多功能详见此处

启动封面：

详见此处

第一步，需要引入相应的图片

image

下载插件 src-cordova目录下

cordova plugin add cordova-plugin-splashscreen

第二步，配置（config.xml）：

分别存放横竖，尺寸不同封面

//设置启动页时长为2000毫秒
<preference name="SplashScreenDelay" value="2000" />
//是否允许旋转
<preference name="ShowSplashScreenSpinner" value="false" />
//自动隐藏启动页
 <preference name="AutoHideSplashScreen" value="true" />
//淡出淡入 默认true
 <preference name="FadeSplashScreen" value="false"/>
//淡出淡入时间
 <preference name="FadeSplashScreenDuration" value="750"/>
<platform name="android">
<splash density="land-hdpi" src="res/screen/android/screen-hdpi-landscape.png" />
<splash density="land-ldpi" src="res/screen/android/screen-ldpi-landscape.png" />
<splash density="land-mdpi" src="res/screen/android/screen-mdpi-landscape.png" />
<splash density="land-xhdpi" src="res/screen/android/screen-xhdpi-landscape.png" />
<splash density="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
<splash density="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
<splash density="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
<splash density="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" /> </platform>

应用图标（config.xml）：

<platform name="android">

<icon density="ldpi" src="res/icon/android/icon.png" />

<icon density="mdpi" src="res/icon/android/icon1.png" />

<icon density="hdpi" src="res/icon/android/icon2.png" />

<icon density="xhdpi" src="res/icon/android/icon3.png" />

<icon density="xxhdpi" src="res/icon/android/icon4.png" />

<icon density="xxxhdpi" src="res/icon/android/icon4.png" />

</platform>

状态栏

如果您使用的UI库提供了状态栏的方法，则使用UI库的方法，以下是通过配置config.xml的方法修改状态栏
详见此处
下载插件

cordova plugin add cordova-plugin-statusbar

默认下Android状态栏为黑色，改为沉浸式风格

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarStyle" value="lightContent" />

需要注意的是，如果是安卓App可能会没有效果，在我的项目里修改如下：

App.vue

methods:{
  onDeviceReady() {
      this.$route.meta.statusBgc
        ? StatusBar.styleLightContent()
        : StatusBar.styleDefault();
    }
}
  watch: {
    $route(to, from) {
       if (cordova.platformId == "android") {
         StatusBar.overlaysWebView(true);
       }
      document.addEventListener("deviceready", this.onDeviceReady, false);
    }
  },
  created() {
   document.addEventListener("deviceready", this.onDeviceReady, false);
  }