跨平臺移動端APP開發---簡單高效的MUI框架

時間  2019-12-02
標籤 跨平臺 移動 app 開發 簡單 高效 mui 框架 欄目 無線 简体版
原文   原文鏈接
MUI是dcloud(數字天堂)公司旗下的一款跨平臺開發移動APP的框架產品，在學習MUI框架以前，最早接觸了Hbuilder代碼編輯器，它帶給個人第一感受是快，這是HBuilder的最大優點，經過完整的語法提示和代碼輸入法、代碼塊等，大幅提高HTML 、JS、css的開發效率。
 01-初識MUI
 
MUI 有如下兩大亮點：
1、輕量
追求性能體驗，是咱們開始啓動MUI項目的首要目標，輕量必然是重要特徵；
MUI不依賴任何第三方JS庫，壓縮後的JS和CSS文件僅有100+K和60+K
2、原生UI
鑑於以前的不少前端框架（特別是響應式佈局的框架），UI控件看起來太像網頁，沒有原生感受，所以追求原生UI感受也是咱們的重要目標
MUI以iOS平臺UI爲基礎，補充部分Android平臺特有的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事件，若加載完畢，再自動顯示新頁面；
頁面關閉：勿重複監聽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方法中；
 
 02-webview基本知識
 
什麼是webview？

在學習MUI的webview相關知識以前，咱們先來了解下什麼是窗口？什麼是webview?
舉個類似的例子，咱們在使用瀏覽器的時候，瀏覽器的頂部和底部的選項卡欄是固定不變的，當咱們打開不一樣的網頁時，網頁內容會隨之改變。這時，瀏覽器就至關於一個窗口，不一樣的網頁就至關於不一樣的webview。同理，在應用MUI製做手機APP頁面時，每個HTML頁面就是一個窗口，咱們能夠在一個頁面中建立多個webview。
建立新的Webview窗口 
WebviewObject plus.webview.create( url, id, styles, extras );
說明：
建立Webview窗口，用於加載新的HTML頁面，可經過styles設置Webview窗口的樣式，建立完成後須要調用show方法才能將Webview窗口顯示出來。
顯示Webview窗口 
void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
說明：
顯示已建立或隱藏的Webview窗口，需先獲取窗口對象或窗口id，並可指定顯示窗口的動畫及動畫持續時間。
隱藏Webview窗口 
void plus.webview.hide( id_wvobj, aniHide, duration, extras );
說明：
根據指定的WebviewObject對象或id隱藏Webview窗口，使得窗口不可見。
獲取當前窗口的WebviewObject對象 
WebviewObject plus.webview.currentWebview();
說明：
獲取當前頁面所屬的Webview窗口對象。
查找指定標識的WebviewObject窗口 
WebviewObject plus.webview.getWebviewById( id );
說明：
在已建立的窗口列表中查找指定標識的Webview窗口並返回。 若沒有查找到指定標識的窗口則返回null，若存在多個相同標識的Webview窗口，則返回第一個建立的Webview窗口。 若是要獲取應用入口頁面所屬的Webview窗口，其標識爲應用的%APPID%，可經過plus.runtime.appid獲取。
建立並打開Webview窗口 
WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );
說明：
建立並顯示Webview窗口，用於加載新的HTML頁面，可經過styles設置Webview窗口的樣式，建立完成後自動將Webview窗口顯示出來。
mui雙webview模式
首先咱們要了解mui爲了解決窗體切換白屏和區域滾動提出的雙webview模式。
頁面初始化
mui框架將不少功能配置都集中在 mui.init方法中，要使用某項功能，只須要在mui.init方法中完成對應參數配置便可，目前支持在mui.init方法中配置的功能包括：建立子頁面、關閉頁面、手勢事件配置、預加載、下拉刷新、上拉加載、設置系統狀態欄背景顏色。mui須要在頁面加載時初始化不少基礎控件,如監聽返回鍵,所以務必在每一個頁面中調用.
如下是能夠配置的參數： 
mui.init({
    //子頁面
    subpages: [{
        //...
    }],
    //預加載
    preloadPages:[
        //...
     ],
    //下拉刷新、上拉加載
     pullRefresh : {
       //...
    },
    //手勢配置
      gestureConfig:{
       //...
    },
    //側滑關閉
    swipeBack:true, //Boolean(默認false)啓用右滑關閉功能

    //監聽Android手機的back、menu按鍵
    keyEventBind: {
        backbutton: false,  //Boolean(默認truee)關閉back按鍵監聽
        menubutton: false   //Boolean(默認true)關閉menu按鍵監聽
    },
    //處理窗口關閉前的業務
    beforeback: function() {
        //... //窗口關閉前處理其餘業務詳情點擊 ↑ "關閉頁面"連接查看
    },
    //設置狀態欄顏色
    statusBarBackground: '#9defbcg', //設置狀態欄顏色,僅iOS可用
    preloadLimit:5//預加載窗口數量限制(一旦超出,先進先出)默認不限制
})
以下爲打印當前頁面URL的示例： 
mui.plusReady(function(){ console.log("當前頁面URL："+plus.webview.currentWebview().getURL()); });
建立子頁面
在mobile app開發過程當中，常常遇到卡頭卡尾的頁面，此時若使用局部滾動，在android手機上會出現滾動不流暢的問題； mui的解決思路是：將須要滾動的區域經過單獨的webview實現，徹底使用原生滾動。具體作法則是：將目標頁面分解爲主頁面和內容頁面，主頁面顯示卡頭卡尾區域，好比頂部導航、底部選項卡等；內容頁面顯示具體須要滾動的內容，而後在主頁面中調用mui.init方法初始化內容頁面。
 
參數說明：
styles:表示窗口屬性，參考5+規範中的WebviewStyle；特別注意，height和width兩個屬性,即便不設置，也默認按100%計算；所以若設置了top值爲非"0px"的狀況，建議同時設置bottom值，不然5+ runtime根據高度100%計算，可能會形成頁面真實底部位置超出屏幕範圍的狀況；left、right同理。
示例：Hello mui的首頁其實就是index.html加list.html合併而成的，以下：
index.html的做用就是顯示固定導航，list.html顯示具體列表內容，列表項的滾動是在list.html所在webview中使用原生滾動，既保證了滾動條不會穿透頂部導航，符合app的體驗，也保證了列表流暢滾動，解決了區域滾動卡頓的問題。 list.html就是index.html的子頁面，建立代碼比較簡單，以下： 
mui.init({
    subpages:[{
      url:'list.html',
      id:'list.html',
      styles:{
        top:'45px',//mui標題欄默認高度爲45px；
        bottom:'0px'//默認爲0px，可不定義；
      }
    }]
});
打開新頁面
作 web app，一個沒法避開的問題就是轉場動畫；web是基於連接構建的，從一個頁面點擊連接跳轉到另外一個頁面，若是經過有刷新的打開方式，用戶要面對一個空白的頁面等待；若是經過無刷新的方式，用Javascript移入DOM節點（常見的SPA解決方案），會碰到很高的性能挑戰：DOM節點繁多，頁面太大，轉場動畫不流暢甚至致使瀏覽器崩潰； mui的解決思路是：單webview只承載單個頁面的dom，減小dom層級及頁面大小；頁面切換使用原生動畫，將最耗性能的部分交給原生實現。 
mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新頁面頂部位置
      bottom:newage-bottom-position,//新頁面底部位置
      width:newpage-width,//新頁面寬度，默認爲100%
      height:newpage-height,//新頁面高度，默認爲100%
      ......
    },
    extras:{
      .....//自定義擴展參數，能夠用來處理頁面間傳值
    },
    createNew:false,//是否重複建立一樣id的webview，默認爲false:不重複建立，直接顯示
    show:{
      autoShow:true,//頁面loaded事件發生後自動顯示，默認爲true
      aniShow:animationType,//頁面顯示動畫，默認爲」slide-in-right「；
      duration:animationTime//頁面動畫持續時間，Android平臺默認100毫秒，iOS平臺默認200毫秒；
    },
    waiting:{
      autoShow:true,//自動顯示等待框，默認爲true
      title:'正在加載...',//等待對話框上顯示的提示內容
      options:{
        width:waiting-dialog-widht,//等待框背景區域寬度，默認根據內容自動計算合適寬度
        height:waiting-dialog-height,//等待框背景區域高度，默認根據內容自動計算合適高度
        ......
      }
    }
})

 

參數說明：
  • styles:表示窗口參數，參考5+規範中的WebviewStyle；特別注意，height和width兩個屬性,即便不設置，也默認按100%計算；所以若設置了top值爲非"0px"的狀況，建議同時設置bottom值，不然5+ runtime根據高度100%計算，可能會形成頁面真實底部位置超出屏幕範圍的狀況,left、right同理。
  • extras:新窗口的額外擴展參數，可用來處理頁面間傳值；例如：
var webview = mui.openWindow({ url:'info.html', extras:{ name:'mui' } }); console.log(webview.name);
控制檯會輸出"mui"字符串；
注意：擴展參數僅在打開新窗口時有效，若目標窗口爲預加載頁面，則經過mui.openWindow方法打開時傳遞的extras參數無效。
  • createNew:是否重複建立相同id的webview；爲優化性能、避免app中重複建立webview，mui v1.7.0開始增長createNew參數，默認爲false；判斷邏輯以下：若createNew爲true，則不判斷重複，每次都新建webview；若爲fasle，則先計算當前App中是否已存在一樣id的webview，若存在則直接顯示；不然新建立並根據show參數執行顯示邏輯；該參數可能致使的影響：若業務寫在plusReady事件中，而plusReady事件僅首次建立時會觸發，則下次再次經過mui.openWindow方法打開一樣webview時，是不會再次觸發plusReady事件的，此時可經過自定義事件觸發；
  • show:表示窗口顯示控制。autoShow：目標窗口loaded事件發生後，是否自動顯示；若目標頁面爲預加載頁面，則該參數無效；aniShow表示頁面顯示動畫，好比從右側劃入、從下側劃入等
  • waiting:表示系統等待框；mui框架在打開新頁面時等待框的處理邏輯爲：顯示等待框-->建立目標頁面webview-->目標頁面loaded事件發生-->關閉等待框；所以，只有當新頁面爲新建立頁面（webview）時，會顯示等待框，不然若爲預加載好的頁面，則直接顯示目標頁面，不會顯示等待框。waiting中的參數：autoShow表示自動顯示等待框，默認爲true，若爲false，則不顯示等待框；注意：若顯示了等待框，但目標頁面不自動顯示，則需在目標頁面中經過以下代碼關閉等待框plus.nativeUI.closeWaiting();。title表示等待框上的提示文字，options表示等待框顯示參數，好比寬高、背景色、提示文字顏色等
示例1：Hello mui中，點擊首頁右上角的圖標，會打開關於頁面，實現代碼以下： 
//tap爲mui封裝的單擊事件，可參考手勢事件章節
document.getElementById('info').addEventListener('tap', function() {
  //打開關於頁面
  mui.openWindow({
    url: 'examples/info.html',
    id:'info'
  });
});
因沒有傳入styles參數，故默認全屏顯示；也沒有傳入show參數，故使用slide-in-right動畫，新頁面從右側滑入。
示例2：從A頁面打開B頁面，B頁面爲一個須要從服務端加載的列表頁面，若在B頁面loaded事件發生時就將其顯示出來，因服務器數據還沒有加載完畢，列表頁面爲空，用戶體驗很差；可經過以下方式改善用戶體驗（最好的用戶體驗應該是經過預加載的方式）
第一步，B頁面loaded事件發生後，不自動顯示 
//A頁面中打開B頁面，設置show的autoShow爲false，則B頁面在其loaded事件發生後，不會自動顯示；
mui.openWindow({
    url: 'B.html',
    show:{
      autoShow:false
    }
});
第二步，在B頁面獲取列表數據後，再關閉等待框、顯示B頁面 
//B頁面onload從服務器獲取列表數據；
window.onload = function(){
  //從服務器獲取數據
  ....
  //業務數據獲取完畢，並已插入當前頁面DOM；
  //注意：若爲ajax請求，則需將以下代碼放在處理完ajax響應數據以後；
  mui.plusReady(function(){
    //關閉等待框
    plus.nativeUI.closeWaiting();
    //顯示當前頁面
    mui.currentWebview.show();
  });
關閉頁面
mui框架將窗口關閉功能封裝在mui.back方法中，具體執行邏輯是：
若當前webview爲預加載頁面，則hide當前webview；不然，close當前webview。
在mui框架中，有三種操做會觸發頁面關閉（執行mui.back方法）。
  • 點擊包含.mui-action-back類的控件
  • 在頁面上，向右快速滑動
  • Android手機按下back按鍵
hbuilder中敲mheader生成的代碼塊，會自動生成帶有返回導航箭頭的標題欄，點擊返回箭頭可關閉當前頁面，緣由就是由於該返回箭頭包含.mui-action-back類，代碼以下： 
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">標題</h1>
</header>
若但願在頂部導航欄以外的其它區域添加關閉頁面的控件，只須要在對應控件上添加.mui-action-back類便可，以下爲一個關閉按鈕示例：
<button type="button" class='mui-btn mui-btn-danger mui-action-back'>關閉</button>
mui框架封裝的頁面右滑關閉功能，默認未啓用，若要使用右滑關閉功能，須要在 mui.init();方法中設置swipeBack參數，以下：
mui.init({ swipeBack:true //啓用右滑關閉功能 });
mui框架默認會監聽Android手機的back按鍵，而後執行頁面關閉邏輯； 若不但願mui自動處理back按鍵，可經過以下方式關閉mui的back按鍵監聽；
mui.init({ keyEventBind: { backbutton: false //關閉back按鍵監聽 } });
除了如上三種操做外，也能夠直接調用 mui.back()方法，執行窗口關閉邏輯；mui.back()僅處理窗口邏輯，若但願在窗口關閉以前再處理一些其它業務邏輯，則可將業務邏輯抽象成一個具體函數，而後註冊爲mui.init方法的beforeback參數;beforeback的執行邏輯爲：
執行 beforeback參數對應的函數若返回false，則再也不執行mui.back()方法；不然（返回true或無返回值），繼續執行mui.back()方法；
示例：從列表打開詳情頁面，從詳情頁面再返回後但願刷新列表界面，此時可註冊beforeback參數，而後經過自定義事件通知列表頁面刷新數據，示例代碼以下： 
mui.init({
    beforeback: function(){
        //得到列表界面的webview
        var list = plus.webview.getWebviewById('list');
        //觸發列表界面的自定義事件（refresh）,從而進行數據刷新
        mui.fire(list,'refresh');
        //返回true，繼續頁面關閉邏輯
        return true;
    }
});
注意： beforeback的執行返回必須是同步的（阻塞模式），若使用nativeUI這種異步js（非阻塞模式），則可能會出現意想不到的結果；好比：經過plus.nativeUI.confirm()彈出確認框，可能用戶還沒有選擇，頁面已經返回了（beforeback同步執行完畢，無返回值，繼續執行mui.back()方法，nativeUI不會阻塞js進程）：在這種狀況下，若要自定義業務邏輯，就須要複寫mui.back方法了；以下爲一個自定義示例，每次都須要用戶確認後，纔會關閉當前頁面。 
//備份mui.back，mui.back已將窗口關閉邏輯封裝的比較完善（預加載及父子窗口），所以最好複用mui.back
var old_back = mui.back;
mui.back = function(){
  var btn = ["肯定","取消"];
  mui.confirm('確認關閉當前窗口？','Hello MUI',btn,function(e){
    if(e.index==0){
        //執行mui封裝好的窗口關閉邏輯；
        old_back();
    }
  });
}
注意：自定義關閉邏輯時，必定要重寫 mui.back，不能簡單經過addEventListener增長back按鍵監聽， 由於addEventListener只會增長新的執行邏輯，老的監聽邏輯依然會執行。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程