初探MUI(二) MUI是一個HTML5前端框架，主要用於手機APP開發。附 "MUI" 官方文檔。以下內容均圍繞MUI進行討論，歡迎大家騷擾^^ <! more 學習心得 學習完MUI基礎理論後，相信很多人都會覺得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開發經驗的人來說比較的容易理解，但是對於一個前端開發人員來說，這一塊肯定是學習的重點。
