跨平臺移動(dòng) APP 開(kāi)發(fā)進(jìn)階( 一)mui 開(kāi)發(fā)注意事項 mui 開(kāi)發(fā)注意事項 Mui HTML5 開(kāi)發(fā)框架 mui 是一個(gè)高性能的 HTML5 開(kāi)發(fā)框架，從 UI 到效率，都在極力追求原生體驗；這個(gè)框架自身有一些規則，剛接觸的同學(xué)不很熟悉，特總結本文；想了解 mui 更詳細的信息，請訪(fǎng)問(wèn) mui 官網(wǎng)。
DOM 結構 關(guān)于 mui 頁(yè)面的 dom，你需要知道如下規則：
固定欄靠前 所謂的固定欄，也就是帶有.mui-bar（類(lèi)選擇器）屬性的節點(diǎn)，都是基于 fixed 定位的元素；常見(jiàn)組件包括：頂部導航欄（.mui-bar-nav）、底部工具條(.mui-bar-footer)、底部選項卡（.mui-bar-tab）;這些元素使用時(shí)需遵循一個(gè)規則：放在 mui-content 元素之前，即使是底部工具條和底部選項卡，也要放在.mui-content 之前，否則固定欄會(huì )遮住部分主內容； ### 一切內容都要包裹在 mui-content 中 除了固定欄之外，其它內容都要包裹在.mui-content 中，否則就有可能被固定欄遮罩，原因：固定欄基于 Fixed 定位，不受流式布局限制，普通內容依然會(huì )從 top:0的位置開(kāi)始布局，這樣就會(huì )被固定欄遮罩，mui 為了解決這個(gè)問(wèn)題，定義了如下css 代碼：
.mui-bar-nav ~ .mui-content {
padding-top: 44px;
}
.mui-bar-footer ~ .mui-content {
padding-bottom: 44px;
}
.mui-bar-tab ~ .mui-content {
padding-bottom: 50px;
}
你當然可以通過(guò)自定義 CSS 的方式實(shí)現如上類(lèi)似效果，但為了使用簡(jiǎn)便，
建議將除固定欄之外的所有內容，全部放在.mui-content 中。
始終為 button 按鈕添加 type 屬性 若 button 按鈕沒(méi)有 type 屬性，瀏覽器默認按照 type=submit 邏輯處理，這樣若將沒(méi)有 type 的 button 放在 form 表單中，點(diǎn)擊按鈕就會(huì )執行 form 表單提交，頁(yè)面就會(huì )刷新，用戶(hù)體驗極差。
窗口管理 頁(yè)面初始化：必須執行 mui.init 方法 mui 在頁(yè)面初始化時(shí)，初始化了很多參數配置，比如：按鍵監聽(tīng)、手勢監聽(tīng)等，因此 mui 頁(yè)面都必須調用一次 mui.init()方法； 頁(yè)面跳轉：拋棄 href 跳轉 當瀏覽器加載一個(gè)新頁(yè)面時(shí)，若頁(yè)面 DOM 尚未渲染完畢，頁(yè)面會(huì )先顯示空白，然后等 DOM 渲染完畢后，再顯示具體內容，這是 WEB 瀏覽器技術(shù)無(wú)法逾越的體驗障礙；為解決這個(gè)問(wèn)題，建議使用 [mui.openWindow 方法](http://dcloudio.github.io/mui/javascript/#openwindow)打開(kāi)一個(gè)新的 webview，mui 會(huì )自動(dòng)監聽(tīng)新頁(yè)面的 loaded 事件，若加載完畢，再自動(dòng)顯示新頁(yè)面；擴展閱讀：
hello mui 中的無(wú)等待窗體切換是如何實(shí)現的 提示 HTML5 的性能體驗系列之一 避免切頁(yè)白屏 頁(yè)面關(guān)閉：勿重復監聽(tīng) backbutton mui 框架自動(dòng)封裝了頁(yè)面關(guān)閉邏輯，若希望自定義返回邏輯（例如編輯頁(yè)面的返回，需用戶(hù)確認放棄草稿后再執行返回邏輯），則需要重寫(xiě) mui.back 方法，切勿簡(jiǎn)單通過(guò) addEventListener 添加 backbutton 監聽(tīng)，因為 addEventListener 只會(huì )增加新的執行程序，mui 默認封裝的監聽(tīng)執行邏輯依然會(huì )繼續執行，因此若僅addEventListener 添加用戶(hù)確認框，則用戶(hù)即使選擇了取消，也會(huì )繼續關(guān)閉窗口。
手勢操作 點(diǎn)擊：忘記 click 快速響應是 mobile App 實(shí)現的重中之重，研究表明，當延遲超過(guò) 100 毫秒，用戶(hù)就能感受到界面的卡頓，然而手機瀏覽器的 click 點(diǎn)擊存在 300 毫秒延遲（至于為何會(huì )延遲，及 300 毫秒的來(lái)龍去脈，請自行谷百），mui 為了解決這個(gè)問(wèn)題，封裝了 tap 事件，因此在任何點(diǎn)擊的時(shí)候，請忘記 click 及 onclick 操作，統統使用如下代碼：
element.addEventListener("tap",function(){
//點(diǎn)擊響應邏輯
});
