在使用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);
}
网友评论