【学习笔记】HBuilder状态栏隐藏显示及颜色

最近在看HBuilder文档时针对顶部状态栏如何隐藏/显示及如何设定颜色有一些疑问，也看了不少人问得问题和解答，总结出来几个方法，和大家分享下

默认的含mui的html文件都会包含

<script type="text/javascript" charset="utf-8">
    mui.init();
script>

设置系统状态栏背景颜色（iOS7及以上生效）

mui.init()方法是用来初始化内容页面，在这里可以直接设置状态栏的颜色

<script type="text/javascript" charset="utf-8">
    mui.init({
        statusBarBackground:"#FF0000"
    });
script>

还可以在plusready中增加事件的方式来实现：

<script type="text/javascript">
  document.addEventListener('plusready',function(){
        plus.navigator.setStatusBarBackground("#FF0000");
  },false);
script>

这个方法适用于动态改变状态栏颜色，可以直接这么写，也可以封装成一个函数，再调用

<script type="text/javascript">
    function setStatusbarRed(){
      // 设置系统状态栏背景色为红色
       plus.navigator.setStatusBarBackground("#FF0000");
    }

    document.addEventListener('plusready',function(){
            setStatusbarRed();
    },false);
script>

设置状态栏透明并且页面内容通顶，可以参考http://ask.dcloud.net.cn/article/118

Android平台暂时不支持自定义系统状态栏样式

但可以通过离线打包在AndroidManifest.xml中配置主Activity的皮肤(android:theme)来设置：

<activity
      android:name="io.dcloud.PandoraEntry"
               android:configChanges="orientation|keyboardHidden|screenSize"
       android:label="@string/app_name"
       android:launchMode="singleTask"
       android:screenOrientation="sensor"
       android:windowSoftInputMode="adjustResize"
       android:theme="主Activity的皮肤"
       android:exported="true">
       <intent-filter>
           <action android:name="android.intent.action.MAIN"/>
           <category android:name="android.intent.category.LAUNCHER"/>
       intent-filter>
   activity>

设置状态栏隐藏/显示的方法

双击应用的manifest.json文件，切换到“代码视图”，在apple节点下添加UIStatusBarStyle节点：