在腾讯课堂了解到有关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
网友评论