美文网首页
Mui Hbuilder沉浸式菜单

Mui Hbuilder沉浸式菜单

作者: 写给ciciQ | 来源:发表于2018-04-24 09:30 被阅读0次

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

    相关文章

      网友评论

          本文标题:Mui Hbuilder沉浸式菜单

          本文链接:https://www.haomeiwen.com/subject/hejdlftx.html