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

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框架根據業務場景不一樣，提供了兩種傳值模式。
• 一、頁面初始化時，經過擴展參數傳值
  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;

二、頁面已建立，經過自定義事件傳值
參考mui官網中自定義事件的介紹

更多文章連接：

---

• 本筆記不容許任何我的和組織轉載
• 個人文章：
• 博客園：MUI 框架
• CSDN：MUI 框架