Mui Hbuilder沉浸式菜单

在腾讯课堂了解到有关Mui 沉浸式菜单的内容，很是感兴趣，所以自己动手实践起来。看似懂了的方法，操作起来也是困难重重，好在有度娘，一 一排查搜索，最终解决了。下面记录了问题和解决办法。

首先进行Hbuilder的沉浸式菜单配置。

1、将manifest.json-->代码视图->"distribute" 加入沉浸式开启功能：

1）IOS：“UIReserveStatusbarOffset":false

2）google：ImmersedStatusbar":true

注意，以上两个新加的参数如果放到最后一行，那上一行的末尾务必加上个逗号，否则会提示错误：“同步manifest.json失败，失败原因：com.google.gson.stream.MalformedJsonException: Unterminated object at line 69 column 6 path $.plus.distribute.google.permissions”

2、按上述方法操作后，在控制台获得的沉浸式开启状态始终是false.

获取方式：console.log(plus.navigator.isImmersedStatusbar())

这就意味着沉浸式并未开启，于是开始各种搜，发现是缺少一个设置。需要在manifest.json-->代码视图 -->“plus”中也加入沉浸式参数。

"statusbar": {

"immersed":true

},

这样，控制台获取的沉浸式状态就是true。

3、沉浸式参数设置后，状态栏和顶部header会有偏移，要修正，于是从网上找了段跑起来应该没问题的代码。

mui.plusReady(function () {

var topoffset='45px';

var header=document.getElementById('heardermylab');

console.log(header)

console.log(plus.navigator.isImmersedStatusbar())

if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式

// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置

topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45);

header.style.height=topoffset+'px';

header.style.paddingTop=(topoffset-45)+'px';

}

});

一直提示 Cannot read property 'style' of null。于是各种搜。这个是由于style对应的元素找不到或是未载入而引起的，于是找html 的header ，为其加了一个id=“heardermylab"。

在这里走了一段弯路，起初我加的是id=“hearder"，于是就还出现Cannot read property 'style' of null，应该是id名字和元素名冲突导致的，后来换了个id名字就解决了。

接下来代码上一切设置ok了，但在真机模拟器上运行，总是看不到真机的状态栏（就是有wifi 电池容量等显示的那一行），需要手动下拉才能看见，松手就又没了。这样何谈沉浸式呢？所谓的沉浸式就是要把手机的状态栏和header看似为一体显示啊！

4、凭直觉是模拟器的问题，于是搜索关于夜神模拟器真实模拟手机的方法，最终下载了个小米桌面。在小米桌面上看到了手机状态栏，人家可不是跟你捉迷藏似的，人家一直在。可是运行起我的app，状态栏又顽皮了，不拉不出来。

5、这一次怀疑还是hbuilder的问题，于是搜如何显示手机系统状态栏，撞见了解决办法。我需要将app的全屏显示设置为否。于是再次进入manifest.json-->代码视图，将旗下的几个均为true的参数，选择三个修改成了false：

"ads":{"rp":true,"splash":false,"push":false},"adid":""

},"fullscreen":false,

然后真机模拟重新运行，想要的沉浸式菜单效果来了，状态栏与我的app完美融合了！！

manifest.json参数说明可参考：https://blog.csdn.net/sysuzjz/article/details/51648163