cordova的Statusbar为app提供设置状态栏背景色的功能,官方文档:http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-plugin-statusbar/index.html
插件提供了四种方法:
- show:显示状态栏
- hide:隐藏状态栏
- backgroundColorByName(“”):设置状态栏的背景颜色,双引号内设置颜色,取值范围:black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown。注意:Android5.0系统以上支持设置状态栏颜色。
- overlaysWebView:设置状态栏是否重叠,在IOS7中,设为false,状态栏的风格接近于IOS6
1.插件安装
下面两条命令均可:
cordova plugin add cordova-plugin-statusbar
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
2.在config.xml里面配置如下:
<feature name="StatusBar">
<param name="ios-package" οnlοad="true" value="CDVStatusBar"/>
</feature>
<preference name="Fullscreen" value="false"/>(改为false,否则在Android上状态栏显示不出来)
3.在app.js的run方法添加如下代码
具体的背景色可根据自己的需求设置。
注意:状态栏字体颜色的设置问题
如果把背景颜色设成白色,由于状态栏上面的文字为白色,这样的话状态栏上面的文字就无法看清了。因此本文提供一些解决方案,可以是MIUI6+,Flyme4+,Android6.0+支持切换状态栏的文字颜色为暗色。
android 6.0开始,谷歌官方提供了支持,在style属性中配置android:windowLightStatusBar
即可, 设置为true时,当statusbar的背景颜色为淡色时,statusbar的文字颜色会变成灰色,为false时同理。