Hbuilder构建iosapp沉浸式顶栏效果

hbuilder mui 沉浸式

HBuilder创建的应用默认不使用沉浸式状态栏样式，需要进行如下配置开启：
打开应用的manifest.json文件，切换到代码视图，在plus -> distribute -> apple 下添加UIReserveStatusbarOffset节点并设置值为false。

"UIReserveStatusbarOffset": false,

注意点：在调试模式时不会生效，需要使用云端打包或者本地打包才会生效。setTimeout的作用是可以顺利获取到dom，从而设置样式。该段代码可以放在plusReady之前执行

(function(w) {
    var immersed = 20;
    var ms = (/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);
    if (ms && ms.length >= 3) { // 当前环境为沉浸式状态栏模式
        immersed = parseFloat(ms[2]); // 获取状态栏的高度
    }
    window.topheight = immersed;
    var topoffset = '0px';
    var height = '45px';
    topoffset = Math.round(immersed) + 'px';
    height = Math.round(immersed + 45) + 'px';
    //如果不设置延时，好像无法获取到dom
    setTimeout(function() {
        var topoffset = '20px';
        var height = '65px';
        var t = mui('header')[0];
        t && (t.style.paddingTop = topoffset, t.style.height = height, t.style.background = '-webkit-linear-gradient(top,#02c374,#02c374)', t.style.color = '#02c374');
        var t = mui('.mui-content')[0];
        t && (t.style.paddingTop = height);
    }, 0);
})(window);