H5+狀態欄透明(沉浸式)/全屏/設置顏色 整理

H5+對web APP狀態欄設置整理：

開發工具：HBuilder
直接新建移動APP項目
測試方法爲HBuilder的ios真機測試

一、沉浸式狀態欄

若是頁面頂部是圖片，通常會把狀態欄變成透明。

首先能夠檢測下當前環境是否支持沉浸式狀態欄，檢測語句：

//是否支持沉浸式狀態欄
alert(plus.navigator.isImmersedStatusbar());

默認是不支持的，會彈出false. 想讓環境支持，須要修改項目下的配置文件manifest.json

"plus":{
    "statusbar": {
        "immersed": true
       },
       ...
}

修改完成後，會彈出true.效果以下：

終端支持：

• Android4.4及以上系統支持；

• iOS7.0及以上系統支持。

二、狀態欄全屏

全屏並不是狀態欄透明或變色，而是沒有狀態欄，也就是看不見電量、信號那條了。
設置語句：

//參數：true - 全屏;false - 不全屏
plus.navigator.setFullscreen(true);

效果以下：

終端支持：
沒有終端類型限制

三、狀態欄背景色

修改背景色通常用於頁面頂部背景色爲純色的場景，修改爲和頁面一致的背景色，使頁面更和諧。

修改語句：

//設置系統狀態欄背景色
plus.navigator.setStatusBarBackground('#6495ED');

效果以下：

終端支持：

• Android5及以上系統支持；

• iOS7.0及以上系統支持。

四、狀態欄文字顏色

與背景色調整相同，若是背景圖顏色不當，會形成前景的信號欄文字顏色與背景太相近，看不清前景，此時須要調整前景色。
前景色的使用限制更多些，只能設置黑或白，設置語句：

//參數：dark - 黑色; light - 白色
plus.navigator.setStatusBarStyle('light');

效果以下：

終端支持：

• Android5只有小米和魅族支持，Android6及以上全部安卓支持；

• iOS7及以上支持