MUI框架-02-註意事項-適用場景-實現頁面間傳值

• 關於開發，我拷貝太多也沒什麽意義，就請查閱：官方文檔：http://dev.dcloud.net.cn/mui/ui/

快速入門 - 註意事項

• 有些可能看不懂，這樣排是為了可以做 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方法打開一個新的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(){
       //點擊響應邏輯
   });

• 常見錯誤
  • Uncaught ReferenceError: plus is not defined
  • 在app開發中，若要使用HTML5+擴展api，必須等plusready事件發生後才能正常使用，否則可能會報“plus is not defined”的錯誤；
    mui為簡化開發，將plusReady事件封裝成了mui.plusReady()方法，凡涉及到HTML5+的api，建議都寫在mui.plusReady方法中；

適用場景

• mui 適用場景說明：
• 為解決HTML5在低端Android機上的性能缺陷，mui引入了原生加速，其中最關鍵的就是webview控件，因此mui若要發揮其全部能力，需和5+ App配合適用，若脫離5+ App，mui功能會受限，主要涉及三個部分：

適用場景-webview窗口相關

• 涉及 webview 的，除了5+App，其它所有手機瀏覽器及PC瀏覽器均無法使用，涉及功能點包括：
• webview模式窗體動畫
  創建子窗口（除了為解決區域滾動的常見雙webview場景，還涉及
• webview模式的選項卡等多webview場景）
• webview模式的側滑菜單（也有div方式側滑菜單）
• webview模式的tab選項卡（也有div方式選項卡）
• nativeUI，如原生的警告框、確認框、popover、actionsheet、toast。這些也有HTML5的實現。
• 預加載
• 自定義事件

第三方擴展插件

• 涉及webview的，除了5+App，其它所有手機瀏覽器及PC瀏覽器均無法使用，目前主要包括：語音輸入；

• Touch事件相關（註意pc瀏覽器沒有touch事件）
• Touch事件相關的，手機端瀏覽器均可使用、pc端chrome模擬手機瀏覽器也可以正常使用。

• 但普通PC端瀏覽器因為沒有touch事件，可以顯示控件但滑動操作功能會受限；涉及功能點包括：

手勢事件

• mui封裝的tap相關處理業務：折疊面板、二級列表、二級選項卡；
• mui封裝的swipe、drag相關處理業務：圖片輪播、可左右滑動的圖文表格、可左右滑動的9宮格、滑動觸發列表項菜單、可拖動式側滑菜單、下拉刷新和上拉加載、可拖動式選項卡
• 【備註】：在PC端，大家將tap替換成click，將HTML5默認的Drag事件替換mui 的swipe和drag，就可以解決如上兩個問題。
• 除上述列出的功能點，其它mui功能，均可以在其它手機瀏覽器及PC服務端使用，所有CSS均不受影響。
• 若通過PC端chrome模擬手機瀏覽器訪問hello mui，只能看到首頁標題欄，看不到列表，因為列表是作為子webview頁面加載到首頁的，如無法顯示

MUI 框架如何實現頁面間傳值

• 在App開發中，頁面間傳值是很常見的開發需求，mui框架根據業務場景不同，提供了兩種傳值模式。
• 1、頁面初始化時，通過擴展參數傳值
  mui在初始化頁面時，提供了extras配置參數，通過該參數可以設置頁面參數，從而實現頁面間傳值；
  mui框架在如下幾種場景下，會執行頁面初始化操作：
• 通過mui.openWindow()打開新頁面（若目標頁面為已預加載成功的頁面，則在openWindow方法中傳遞的extras參數無效）；
• 通過mui.init()方法創建子頁面；
• 通過mui.init()方法預加載頁面；

• 通過mui.preload()方法預加載頁面

• 示例，假設我們有如下需求：

• 在首頁中打開關於頁面時，傳遞當前產品名稱及版本號，然後在關於頁面中讀取這兩個參數並顯示出來；

首頁實現代碼：

mui.openWindow({
    url:'info.html',
    id:'info.html',
    extras:{
        name:'mui',
        version:'0.5.8'
    }
});

關於頁面實現代碼：

var self = plus.webview.currentWebview();
var name = self.name;
var version = self.version;

2、頁面已創建，通過自定義事件傳值
參考mui官網中自定義事件的介紹

更多文章鏈接：MUI 框架

• 本筆記不允許任何個人和組織轉載

MUI框架-02-註意事項-適用場景-實現頁面間傳值