跨平臺移動APP開發進階(一)mui開發注意事項x

　跨平臺移動 APP 開發進階( 一)mui 開發注意事項 mui 開發注意事項 Mui HTML5 開發框架 mui 是一個高性能的 HTML5 開發框架，從 UI 到效率，都在極力追求原生體驗；這個框架自身有一些規則，剛接觸的同學不很熟悉，特總結本文；想了解 mui 更詳細的信息，請訪問 mui 官網。

　DOM 結構 關于 mui 頁面的 dom，你需要知道如下規則：

　固定欄靠前 所謂的固定欄，也就是帶有.mui-bar（類選擇器）屬性的節點，都是基于 fixed 定位的元素；常見組件包括：頂部導航欄（.mui-bar-nav）、底部工具條(.mui-bar-footer)、底部選項卡（.mui-bar-tab）;這些元素使用時需遵循一個規則：放在 mui-content 元素之前，即使是底部工具條和底部選項卡，也要放在.mui-content 之前，否則固定欄會遮住部分主內容； ### 一切內容都要包裹在 mui-content 中 除了固定欄之外，其它內容都要包裹在.mui-content 中，否則就有可能被固定欄遮罩，原因：固定欄基于 Fixed 定位，不受流式布局限制，普通內容依然會從 top:0的位置開始布局，這樣就會被固定欄遮罩，mui 為了解決這個問題，定義了如下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;

　 }

　 你當然可以通過自定義 CSS 的方式實現如上類似效果，但為了使用簡便，

　建議將除固定欄之外的所有內容，全部放在.mui-content 中。

　始終為 button 按鈕添加 type 屬性 若 button 按鈕沒有 type 屬性，瀏覽器默認按照 type=submit 邏輯處理，這樣若將沒有 type 的 button 放在 form 表單中，點擊按鈕就會執行 form 表單提交，頁面就會刷新，用戶體驗極差。

　窗口管理 頁面初始化：必須執行 mui.init 方法 mui 在頁面初始化時，初始化了很多參數配置，比如：按鍵監聽、手勢監聽等，因此 mui 頁面都必須調用一次 mui.init()方法； 頁面跳轉：拋棄 href 跳轉 當瀏覽器加載一個新頁面時，若頁面 DOM 尚未渲染完畢，頁面會先顯示空白，然后等 DOM 渲染完畢后，再顯示具體內容，這是 WEB 瀏覽器技術無法逾越的體驗障礙；為解決這個問題，建議使用 [mui.openWindow 方法](http://dcloudio.github.io/mui/javascript/#openwindow)打開一個新的 webview，mui 會自動監聽新頁面的 loaded 事件，若加載完畢，再自動顯示新頁面；擴展閱讀：

　hello mui 中的無等待窗體切換是如何實現的 提示 HTML5 的性能體驗系列之一 避免切頁白屏 頁面關閉：勿重復監聽 backbutton mui 框架自動封裝了頁面關閉邏輯，若希望自定義返回邏輯（例如編輯頁面的返回，需用戶確認放棄草稿后再執行返回邏輯），則需要重寫 mui.back 方法，切勿簡單通過 addEventListener 添加 backbutton 監聽，因為 addEventListener 只會增加新的執行程序，mui 默認封裝的監聽執行邏輯依然會繼續執行，因此若僅addEventListener 添加用戶確認框，則用戶即使選擇了取消，也會繼續關閉窗口。

　手勢操作 點擊：忘記 click 快速響應是 mobile App 實現的重中之重，研究表明，當延遲超過 100 毫秒，用戶就能感受到界面的卡頓，然而手機瀏覽器的 click 點擊存在 300 毫秒延遲（至于為何會延遲，及 300 毫秒的來龍去脈，請自行谷百），mui 為了解決這個問題，封裝了 tap 事件，因此在任何點擊的時候，請忘記 click 及 onclick 操作，統統使用如下代碼：

　element.addEventListener("tap",function(){

　//點擊響應邏輯

　 });