欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

学习笔记之--初探MUI(二)

程序员文章站 2022-06-27 19:41:06
初探MUI(二) MUI是一个HTML5前端框架,主要用于手机APP开发。附 "MUI" 官方文档。以下内容均围绕MUI进行讨论,欢迎大家骚扰^^
初探MUI(二)

MUI是一个HTML5前端框架,主要用于手机APP开发。附MUI官方文档。以下内容均围绕MUI进行讨论,欢迎大家骚扰^^

学习心得

学习完MUI基础理论后,相信很多人都会觉得MUI真的很方便,基本需求都能够的到满足,但其实不然,因为MUI有很多的局限性,以及对某些手机的兼容性问题,导致很多时候会出现莫名其妙的BUG。根据个人观察发现,对于苹果系统更加的友好,而对于安卓系统,因为碎片化太严重,所以应该多找些机型测试。

我遇到过的情况有:
1.底部导航栏(html5):在红米note2,小米3,华为手机上完美使用,但是oppo一款型号底部导航条出现下移情况(注:底部导航条高度通过JS计算,高度写死时不会出现),如果遇到,将底部导航条高度写死。

2.华为手机的虚拟按键,如果按照正常的流式布局下去,当页面内容多于屏幕高度时,底部有fixed定位的元素时,虚拟按键可能会把底部定位的东西遮挡住。(ps:经过测试,华为虚拟按键会缩小屏幕实际高度)解决办法:因为虚拟按键会压缩屏幕高度,而页面底部距离底部定位时,可以将fixed定位的元素挤压上去,将body,html页面高度设置为100%。

3.使用<header></header>时,如果页面有<input type='text />,此时输入文字会将<header></header>挤掉,我的解决办法是:打开软键盘时,挤压webview,减少视口的高度。但是这样做有一个问题,如果页面内容较多,会产生滚动条,给用户的感觉不好。也可以监听软键盘打开事件,动态调整页面。下面仅给出最简单的解决方案:

        mui.plusReady(function () {             
            plus.webview.currentWebview().setStyle({
                        softinputMode: "adjustResize"
                    });
        });

4.使用原生底部导航条,目前遇到的问题是,真机测试时,在苹果6上完美渲染,测试相关逻辑都成功,但是在红米note2上,有两个ICON渲染不出来,只渲染出来了底部导航栏的高度,具体情况尚在测试中。。。。

学习总结

1.在调试MUI项目时,我认为应该先使用安卓手机调试,因为我几次都是在苹果手机上成功调试,但是将源码放到安卓手机上时,出现各种未知的BUG,所以前期测试使用安卓手机,等程序调试完成后,再去苹果手机上测试。

2.因为现在很多人都追求使用原生来写html5,在官方还没发布正式的底部导航条时,就自己按照社区的经验,自己改了一个底部导航条,但是因为打开新的页面时,底部原生导航条不会隐藏,所以没办法,还是只能采用mui提供的底部导航条,所以,对于mui的探索,还是需要自己去多研究,例如:和原生相关的界面渲染,操作原生的内容,调用原生JS等,都需要仔细的研究。所以,我觉得,如果有一定的安卓或者IOS开发经验的人来说比较的容易理解,但是对于一个前端开发人员来说,这一块肯定是学习的重点。

后记