详解做沉浸式状态栏遇到的坑

因为项目首页顶部是一张图片，不做沉浸式实在难看，搜索很多资料，最终解决。

本来打算只在首页用沉浸式，可惜查阅资料后不能单独设置，因为这个是系统（还是应用）级别的

下面说下如何做沉浸式：
1：
开启沉浸式状态栏
manifest.json->plus节点下

"statusbar": {
"immersed": true //开启沉浸式状态栏
}

开启后页面header会顶到系统状态栏，导致页首标题非常难看，所以要做第二步
2：
引入 HelloH5应用中的“js/immersed.js”
如果用官方提供的例子，需要自己手动在每个页面添加两个ID
示例:
<header class="mui-bar mui-bar-nav nav-bg" id="header">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">团队报表</h1>
</header>
<div class="mui-content" id="content">
</div>

我根据需求把官方的immersed.js 简单修改了下
示例：
(function(w){
document.addEventListener('plusready',function(){
},false);

var immersed = 0;
var ms=(/Html5Plus\/.+\s(.(Immersed\/(\d+.?\d).*))/gi).exec(navigator.userAgent);
if(ms&&ms.length>=3){//如果支持沉浸式
immersed=parseInt(ms[2]);//系统状态栏高度
}
w.immersed=immersed;

if(!immersed){
return;//如果不支持则返回，不执行下面操作
}
var t=document.getElementById('header');//获得头部标签
t&&(t.style.paddingTop=immersed+'px',t.style.height=t.offsetHeight+immersed+'px');//改变头部的内边距，以及改变头部的高度
t=document.getElementById('content');//获得主体标签
t&&(t.style.marginTop=immersed+'px');//调整主体距离header的外边距（如果只改变头部不执行这行代码会遮盖主体内容）
})(window);

如果需要看官方原版的js 可以查找HelloH5+应用中的“js/immersed.js”

一般来说用我提供的js足矣，如果还有特殊的需求自己dry

总结：第一步 main.json里开启沉浸式 第二步 在错位的页面，引入js 并且设置两个ID即可

本人才疏学浅，初入hbuilder，内容格式编辑的不好，或许还有更好的方案，将就看吧。。

附官方帖子内容：
http://ask.dcloud.net.cn/article/422 如何动态兼容沉浸式应用
http://ask.dcloud.net.cn/article/12622 html5plus应用实现沉浸式状态栏

最后闲话两句：鄙视一下那些在论坛提出问题，最后解决了之后只回复一句解决了，评论底部坛友也遇到同样的问题，在问楼主怎么解决的就没回复了，真心觉得这种人多了，论坛气氛很差。