美文网首页
第二章 第一节 Vue+Cordova的App启动页,图标,状态

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

作者: 不务正业的设计师 | 来源:发表于2020-04-23 20:22 被阅读0次

    在使用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);
      }
    

    相关文章

      网友评论

          本文标题:第二章 第一节 Vue+Cordova的App启动页,图标,状态

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