学习笔记之--初探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开发经验的人来说比较的容易理解，但是对于一个前端开发人员来说，这一块肯定是学习的重点。