vue项目cordova打包修改statusBar

一、修改statusBar颜色

1.   添加cordovaStatusbar插件 命令行输入下面命令

2. cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

   在config.xml文件里会自动多出下面这个代码

3. <plugin name="cordova-plugin-statusbar" spec="~2.4.2" />

   自己再添加一行设置statusBar颜色的代码（添加整个应用的statusBar）

    <preference name="StatusBarBackgroundColor" value="#0FA0FA" />

   整个app的statusBar 的颜色就修成设置的颜色了，如果需要根据不同页面设置不同颜色则需要 在页面上设置对颜色进行设置注：对于单页应用则会修改其他路由页面的颜色目前解决方法就是在watch $router来设置不同的状态栏颜色 具体代码如下：

   export default {
     data () {
         return {
           statusBarcolorPath:{
              black:['/login','/me']//设置黑色背景的路由
         }
         }
       },
     watch:{
         $route:function (val) {
            if(this.statusBarcolorPath.black.indexOf(val.path)!=-1){
               StatusBar.backgroundColorByHexString("#333");//设置状态栏颜色
            }else {
              StatusBar.backgroundColorByHexString("#0FA0FA");
            }
         },
   }

   上面代码设置登录和我的两个页面为#333颜色，其他都为#0fa0fa 实现效果如下

 

 除了设置statusBar颜色方法还提供了其他方法

1. StatusBar.isVisible 是否已经显示
2. StatusBar.hide(); 隐藏状态栏
3. StatusBar.show(); 显示状态栏

以上方法在安卓上已经试验可用