mui開(kāi)發(fā)文檔.doc

Mui組件部分請(qǐng)參照官網(wǎng)資料，以下資料也來(lái)自官網(wǎng)，主要是便于在手機(jī)上查看一、 窗口事件詳細(xì)內(nèi)容頁(yè)面初始化在app開(kāi)發(fā)中，若要使用HTML5+擴(kuò)展api，必須等plusready事件發(fā)生后才能正常使用，mui將該事件封裝成了mui.plusReady()方法，涉及到HTML5+的api，建議都寫(xiě)在mui.plusReady方法中。如下為打印當(dāng)前頁(yè)面URL的示例：mui.plusReady(function() console.log(當(dāng)前頁(yè)面URL：+plus.webview.currentWebview().getURL(););擴(kuò)展閱讀mui.init()mui插件初始化mui.ready()當(dāng)DOM準(zhǔn)備就緒時(shí)，指定一個(gè)函數(shù)來(lái)執(zhí)行。代碼塊激活字符:minit創(chuàng)建子頁(yè)面在mobile app開(kāi)發(fā)過(guò)程中，經(jīng)常遇到卡頭卡尾的頁(yè)面，此時(shí)若使用局部滾動(dòng)，在android手機(jī)上會(huì)出現(xiàn)滾動(dòng)不流暢的問(wèn)題； mui的解決思路是：將需要滾動(dòng)的區(qū)域通過(guò)單獨(dú)的webview實(shí)現(xiàn)，完全使用原生滾動(dòng)。具體做法則是：將目標(biāo)頁(yè)面分解為主頁(yè)面和內(nèi)容頁(yè)面，主頁(yè)面顯示卡頭卡尾區(qū)域，比如頂部導(dǎo)航、底部選項(xiàng)卡等；內(nèi)容頁(yè)面顯示具體需要滾動(dòng)的內(nèi)容，然后在主頁(yè)面中調(diào)用mui.init方法初始化內(nèi)容頁(yè)面。mui.init( subpages: url:your-subpage-url,/子頁(yè)面HTML地址，支持本地地址和網(wǎng)絡(luò)地址 id:your-subpage-id,/子頁(yè)面標(biāo)志 styles: top:subpage-top-position,/子頁(yè)面頂部位置 bottom:subpage-bottom-position,/子頁(yè)面底部位置 width:subpage-width,/子頁(yè)面寬度，默認(rèn)為100% height:subpage-height,/子頁(yè)面高度，默認(rèn)為100% . , extras:/額外擴(kuò)展參數(shù) );參數(shù)說(shuō)明：styles表示窗口屬性，參考5+規(guī)范中的WebviewStyle；特別注意，height和width兩個(gè)屬性,即使不設(shè)置，也默認(rèn)按100%計(jì)算；因此若設(shè)置了top值為非0px的情況，建議同時(shí)設(shè)置bottom值，否則5+ runtime根據(jù)高度100%計(jì)算，可能會(huì)造成頁(yè)面真實(shí)底部位置超出屏幕范圍的情況；left、right同理。示例：Hello mui的首頁(yè)其實(shí)就是index.html加list.html合并而成的，如下：index.html的作用就是顯示固定導(dǎo)航，list.html顯示具體列表內(nèi)容，列表項(xiàng)的滾動(dòng)是在list.html所在webview中使用原生滾動(dòng)，既保證了滾動(dòng)條不會(huì)穿透頂部導(dǎo)航，符合app的體驗(yàn)，也保證了列表流暢滾動(dòng)，解決了區(qū)域滾動(dòng)卡頓的問(wèn)題。 list.html就是index.html的子頁(yè)面，創(chuàng)建代碼比較簡(jiǎn)單，如下：mui.init( subpages: url:list.html, id:list.html, styles: top:45px,/mui標(biāo)題欄默認(rèn)高度為45px； bottom:0px/默認(rèn)為0px，可不定義； );擴(kuò)展閱讀代碼塊激活字符:misubpage打開(kāi)新頁(yè)面做web app，一個(gè)無(wú)法避開(kāi)的問(wèn)題就是轉(zhuǎn)場(chǎng)動(dòng)畫(huà)；web是基于鏈接構(gòu)建的，從一個(gè)頁(yè)面點(diǎn)擊鏈接跳轉(zhuǎn)到另一個(gè)頁(yè)面，如果通過(guò)有刷新的打開(kāi)方式，用戶要面對(duì)一個(gè)空白的頁(yè)面等待；如果通過(guò)無(wú)刷新的方式，用Javascript移入DOM節(jié)點(diǎn)（常見(jiàn)的SPA解決方案），會(huì)碰到很高的性能挑戰(zhàn)：DOM節(jié)點(diǎn)繁多，頁(yè)面太大，轉(zhuǎn)場(chǎng)動(dòng)畫(huà)不流暢甚至導(dǎo)致瀏覽器崩潰； mui的解決思路是：?jiǎn)蝫ebview只承載單個(gè)頁(yè)面的dom，減少dom層級(jí)及頁(yè)面大??；頁(yè)面切換使用原生動(dòng)畫(huà)，將最耗性能的部分交給原生實(shí)現(xiàn).mui.openWindow( url:new-page-url, id:new-page-id, styles: top:newpage-top-position,/新頁(yè)面頂部位置 bottom:newage-bottom-position,/新頁(yè)面底部位置 width:newpage-width,/新頁(yè)面寬度，默認(rèn)為100% height:newpage-height,/新頁(yè)面高度，默認(rèn)為100% . , extras: ./自定義擴(kuò)展參數(shù)，可以用來(lái)處理頁(yè)面間傳值 , createNew:false,/是否重復(fù)創(chuàng)建同樣id的webview，默認(rèn)為false:不重復(fù)創(chuàng)建，直接顯示 show: autoShow:true,/頁(yè)面loaded事件發(fā)生后自動(dòng)顯示，默認(rèn)為true aniShow:animationType,/頁(yè)面顯示動(dòng)畫(huà)，默認(rèn)為”slide-in-right“； duration:animationTime/頁(yè)面動(dòng)畫(huà)持續(xù)時(shí)間，Android平臺(tái)默認(rèn)100毫秒，iOS平臺(tái)默認(rèn)200毫秒； , waiting: autoShow:true,/自動(dòng)顯示等待框，默認(rèn)為true title:正在加載.,/等待對(duì)話框上顯示的提示內(nèi)容 options: width:waiting-dialog-widht,/等待框背景區(qū)域?qū)挾?，默認(rèn)根據(jù)內(nèi)容自動(dòng)計(jì)算合適寬度 height:waiting-dialog-height,/等待框背景區(qū)域高度，默認(rèn)根據(jù)內(nèi)容自動(dòng)計(jì)算合適高度 . )參數(shù)： styles窗口參數(shù)，參考5+規(guī)范中的WebviewStyle；特別注意，height和width兩個(gè)屬性,即使不設(shè)置，也默認(rèn)按100%計(jì)算；因此若設(shè)置了top值為非0px的情況，建議同時(shí)設(shè)置bottom值，否則5+ runtime根據(jù)高度100%計(jì)算，可能會(huì)造成頁(yè)面真實(shí)底部位置超出屏幕范圍的情況；left、right同理。 extras新窗口的額外擴(kuò)展參數(shù)，可用來(lái)處理頁(yè)面間傳值；例如：var webview = mui.openWindow(url:info.html,extras:name:mui /擴(kuò)展參數(shù));console.log();/輸出mui字符串注意：擴(kuò)展參數(shù)僅在打開(kāi)新窗口時(shí)有效，若目標(biāo)窗口為預(yù)加載頁(yè)面，則通過(guò)mui.openWindow方法打開(kāi)時(shí)傳遞的extras參數(shù)無(wú)效。 createNew是否重復(fù)創(chuàng)建相同id的webview；為優(yōu)化性能、避免app中重復(fù)創(chuàng)建webview，mui v1.7.0開(kāi)始增加createNew參數(shù)，默認(rèn)為false；判斷邏輯如下： createNew參數(shù)為為true，則不判斷重復(fù)，每次都新建webview； createNew參數(shù)為為fasle，則先查找當(dāng)前App中是否已存在同樣id的webview，若存在則直接顯示；否則新創(chuàng)建并根據(jù)show參數(shù)執(zhí)行顯示邏輯；注意：plusReady事件僅在webview首次創(chuàng)建時(shí)觸發(fā)，使用mui.openWindow方法多次打開(kāi)已存在的同樣id的webview時(shí)，是不會(huì)重復(fù)觸發(fā)plusReady事件的； 因此若業(yè)務(wù)寫(xiě)在plusReady事件中，可能會(huì)出現(xiàn)執(zhí)行結(jié)果和預(yù)期不一致的情況；此時(shí)可通過(guò)自定義事件觸發(fā)； 案例參考：mui.plusReady有時(shí)會(huì)失效; show窗口顯示控制參數(shù)，具體參數(shù)如下： autoShow：目標(biāo)窗口loaded事件發(fā)生后，是否自動(dòng)顯示，默認(rèn)為true；若為false，則僅創(chuàng)建但不顯示webview；若目標(biāo)頁(yè)面為預(yù)加載頁(yè)面，則該參數(shù)無(wú)效； aniShow表示頁(yè)面顯示動(dòng)畫(huà)，比如從右側(cè)劃入、從下側(cè)劃入等，具體可參考5+規(guī)范中的AnimationTypeShow duration：顯示W(wǎng)ebview窗口動(dòng)畫(huà)的持續(xù)時(shí)間，單位為ms waiting系統(tǒng)等待框參數(shù)mui框架在打開(kāi)新頁(yè)面時(shí)等待框的處理邏輯為：顯示等待框-創(chuàng)建目標(biāo)頁(yè)面webview-目標(biāo)頁(yè)面loaded事件發(fā)生-關(guān)閉等待框；因此，只有當(dāng)新頁(yè)面為新創(chuàng)建頁(yè)面（webview）時(shí)，會(huì)顯示等待框，否則若為預(yù)加載好的頁(yè)面，則直接顯示目標(biāo)頁(yè)面，不會(huì)顯示等待框。waiting中的具體參數(shù)： autoShow：是否自動(dòng)顯示等待框，默認(rèn)為true；若為false，則不顯示等待框；注意：若waiting框的autoShow為true，但目標(biāo)頁(yè)面不自動(dòng)顯示，則需在目標(biāo)頁(yè)面中通過(guò)如下代碼關(guān)閉等待框：plus.nativeUI.closeWaiting(); title：等待框上的提示文字 options表示等待框顯示參數(shù)，比如寬高、背景色、提示文字顏色等，具體可參考5+規(guī)范中的WaitingOption示例1：Hello mui中，點(diǎn)擊首頁(yè)右上角的圖標(biāo)，會(huì)打開(kāi)關(guān)于頁(yè)面，實(shí)現(xiàn)代碼如下：/tap為mui封裝的單擊事件，可參考手勢(shì)事件章節(jié)document.getElementById(info).addEventListener(tap, function() /打開(kāi)關(guān)于頁(yè)面 mui.openWindow( url: examples/info.html, id:info ););因沒(méi)有傳入styles參數(shù)，故默認(rèn)全屏顯示；也沒(méi)有傳入show參數(shù)，故使用slide-in-right動(dòng)畫(huà)，新頁(yè)面從右側(cè)滑入。示例2：從A頁(yè)面打開(kāi)B頁(yè)面，B頁(yè)面為一個(gè)需要從服務(wù)端加載的列表頁(yè)面，若在B頁(yè)面loaded事件發(fā)生時(shí)就將其顯示出來(lái)，因服務(wù)器數(shù)據(jù)尚未加載完畢，列表頁(yè)面為空，用戶體驗(yàn)不好；可通過(guò)如下方式改善用戶體驗(yàn)（最好的用戶體驗(yàn)應(yīng)該是通過(guò)預(yù)加載的方式）：第一步，B頁(yè)面loaded事件發(fā)生后，不自動(dòng)顯示；/A頁(yè)面中打開(kāi)B頁(yè)面，設(shè)置show的autoShow為false，則B頁(yè)面在其loaded事件發(fā)生后，不會(huì)自動(dòng)顯示；mui.openWindow( url: B.html, show: autoShow:false );第二步，在B頁(yè)面獲取列表數(shù)據(jù)后，再關(guān)閉等待框、顯示B頁(yè)面/B頁(yè)面onload從服務(wù)器獲取列表數(shù)據(jù)；window.onload = function() /從服務(wù)器獲取數(shù)據(jù) . /業(yè)務(wù)數(shù)據(jù)獲取完畢，并已插入當(dāng)前頁(yè)面DOM； /注意：若為ajax請(qǐng)求，則需將如下代碼放在處理完ajax響應(yīng)數(shù)據(jù)之后； mui.plusReady(function() /關(guān)閉等待框 plus.nativeUI.closeWaiting(); /顯示當(dāng)前頁(yè)面 mui.currentWebview.show(); );擴(kuò)展閱讀代碼塊激活字符:mopenwindow關(guān)閉頁(yè)面mui框架將窗口關(guān)閉功能封裝在mui.back方法中，具體執(zhí)行邏輯是： 若當(dāng)前webview為預(yù)加載頁(yè)面，則hide當(dāng)前webview； 否則，close當(dāng)前webview；在mui框架中，有三種操作會(huì)觸發(fā)頁(yè)面關(guān)閉（執(zhí)行mui.back方法）： 點(diǎn)擊包含.mui-action-back類(lèi)的控件 在屏幕內(nèi)，向右快速滑動(dòng) Android手機(jī)按下back按鍵iOS平臺(tái)原生支持從屏幕邊緣右滑關(guān)閉iOS平臺(tái)可通過(guò)popGesture參數(shù)實(shí)現(xiàn)從屏幕邊緣右滑關(guān)閉webview，參考5+規(guī)范，若想禁用該功能，可通過(guò)setStyle方法設(shè)置popGesture為none。hbuilder中敲mheader生成的代碼塊，會(huì)自動(dòng)生成帶有返回導(dǎo)航箭頭的標(biāo)題欄，點(diǎn)擊返回箭頭可關(guān)閉當(dāng)前頁(yè)面，原因就是因?yàn)樵摲祷丶^包含.mui-action-back類(lèi)，代碼如下：標(biāo)題若希望在頂部導(dǎo)航欄之外的其它區(qū)域添加關(guān)閉頁(yè)面的控件，只需要在對(duì)應(yīng)控件上添加.mui-action-back類(lèi)即可，如下為一個(gè)關(guān)閉按鈕示例：關(guān)閉mui框架封裝的頁(yè)面右滑關(guān)閉功能，默認(rèn)未啟用，若要使用右滑關(guān)閉功能，需要在mui.init();方法中設(shè)置swipeBack參數(shù)，如下：mui.init(swipeBack:true /啟用右滑關(guān)閉功能);mui框架默認(rèn)會(huì)監(jiān)聽(tīng)Android手機(jī)的back按鍵，然后執(zhí)行頁(yè)面關(guān)閉邏輯； 若不希望mui自動(dòng)處理back按鍵，可通過(guò)如下方式關(guān)閉mui的back按鍵監(jiān)聽(tīng)；mui.init(keyEventBind: backbutton: false /關(guān)閉back按鍵監(jiān)聽(tīng));除了如上三種操作外，也可以直接調(diào)用mui.back()方法，執(zhí)行窗口關(guān)閉邏輯；mui.back()僅處理窗口邏輯，若希望在窗口關(guān)閉之前再處理一些其它業(yè)務(wù)邏輯，則可將業(yè)務(wù)邏輯抽象成一個(gè)具體函數(shù)，然后注冊(cè)為mui.init方法的beforeback參數(shù);beforeback的執(zhí)行邏輯為： 執(zhí)行beforeback參數(shù)對(duì)應(yīng)的函數(shù)若返回false，則不再執(zhí)行mui.back()方法； 否則（返回true或無(wú)返回值），繼續(xù)執(zhí)行mui.back()方法；示例：從列表打開(kāi)詳情頁(yè)面，從詳情頁(yè)面再返回后希望刷新列表界面，此時(shí)可注冊(cè)beforeback參數(shù)，然后通過(guò)自定義事件通知列表頁(yè)面刷新數(shù)據(jù)，示例代碼如下：mui.init(beforeback: function()/獲得列表界面的webviewvar list = plus.webview.getWebviewById(list);/觸發(fā)列表界面的自定義事件（refresh）,從而進(jìn)行數(shù)據(jù)刷新mui.fire(list,refresh);/返回true，繼續(xù)頁(yè)面關(guān)閉邏輯return true;);注意：beforeback的執(zhí)行返回必須是同步的（阻塞模式），若使用nativeUI這種異步j(luò)s（非阻塞模式），則可能會(huì)出現(xiàn)意想不到的結(jié)果；比如：通過(guò)plus.nativeUI.confirm()彈出確認(rèn)框，可能用戶尚未選擇，頁(yè)面已經(jīng)返回了（beforeback同步執(zhí)行完畢，無(wú)返回值，繼續(xù)執(zhí)行mui.back()方法，nativeUI不會(huì)阻塞js進(jìn)程）：在這種情況下，若要自定義業(yè)務(wù)邏輯，就需要復(fù)寫(xiě)mui.back方法了；如下為一個(gè)自定義示例，每次都需要用戶確認(rèn)后，才會(huì)關(guān)閉當(dāng)前頁(yè)面/備份mui.back，mui.back已將窗口關(guān)閉邏輯封裝的比較完善（預(yù)加載及父子窗口），因此最好復(fù)用mui.backvar old_back = mui.back;mui.back = function() var btn = 確定,取消; mui.confirm(確認(rèn)關(guān)閉當(dāng)前窗口？,Hello MUI,btn,function(e) if(e.index=0) /執(zhí)行mui封裝好的窗口關(guān)閉邏輯； old_back(); );為何設(shè)置了swipeBack: false，在iOS上依然可以右滑關(guān)閉？iOS平臺(tái)原生支持從屏幕邊緣右滑關(guān)閉，這個(gè)是通過(guò)popGesture參數(shù)控制的，參考5+規(guī)范，若需禁用，可通過(guò)setStyle方法設(shè)置popGesture為none。能否通過(guò)addEventListener增加back按鍵監(jiān)聽(tīng)實(shí)現(xiàn)自定義關(guān)閉邏輯？addEventListener只會(huì)增加新的執(zhí)行邏輯，老的監(jiān)聽(tīng)邏輯(mui.back)依然會(huì)執(zhí)行，因此，若需實(shí)現(xiàn)自定義關(guān)閉邏輯，一定要重寫(xiě)mui.back。擴(kuò)展閱讀代碼塊激活字符:mback預(yù)加載所謂的預(yù)加載技術(shù)就是在用戶尚未觸發(fā)頁(yè)面跳轉(zhuǎn)時(shí)，提前創(chuàng)建目標(biāo)頁(yè)面，這樣當(dāng)用戶跳轉(zhuǎn)時(shí)，就可以立即進(jìn)行頁(yè)面切換，節(jié)省創(chuàng)建新頁(yè)面的時(shí)間，提升app使用體驗(yàn)。mui提供兩種方式實(shí)現(xiàn)頁(yè)面預(yù)加載。方式一：通過(guò)mui.init方法中的preloadPages參數(shù)進(jìn)行配置.mui.init( preloadPages: url:prelaod-page-url, id:preload-page-id, styles:,/窗口參數(shù) extras:,/自定義擴(kuò)展參數(shù) subpages:,/預(yù)加載頁(yè)面的子頁(yè)面 , preloadLimit:5/預(yù)加載窗口數(shù)量限制(一旦超出,先進(jìn)先出)默認(rèn)不限制);該種方案使用簡(jiǎn)單、可預(yù)加載多個(gè)頁(yè)面，但不會(huì)返回預(yù)加載每個(gè)頁(yè)面的引用，若要獲得對(duì)應(yīng)webview引用，還需要通過(guò)plus.webview.getWebviewById方式獲得；另外，因?yàn)閙ui.init是異步執(zhí)行，執(zhí)行完mui.init方法后立即獲得對(duì)應(yīng)webview引用，可能會(huì)失敗，例如如下代碼：mui.init( preloadPages: url:list.html, id:list );var list = plus.webview.getWebviewByid(list);/這里可能返回空；方式二：通過(guò)mui.preload方法預(yù)加載.var page = mui.preload( url:new-page-url, id:new-page-id,/默認(rèn)使用當(dāng)前頁(yè)面的url作為id styles:,/窗口參數(shù) extras:/自定義擴(kuò)展參數(shù));通過(guò)mui.preload()方法預(yù)加載，可立即返回對(duì)應(yīng)webview的引用，但一次僅能預(yù)加載一個(gè)頁(yè)面；若需加載多個(gè)webview，則需多次調(diào)用mui.preload()方法；如上兩種方案，各有優(yōu)劣，需根據(jù)具體業(yè)務(wù)場(chǎng)景靈活選擇；判斷預(yù)加載是否成功方式一、通過(guò)直觀現(xiàn)象分析預(yù)加載頁(yè)面會(huì)立即打開(kāi)，不會(huì)顯示等待框；非預(yù)加載頁(yè)面默認(rèn)會(huì)先顯示等待框，再顯示新頁(yè)面；方式二、增加log分析預(yù)加載頁(yè)面是否已創(chuàng)建比如：A頁(yè)面中預(yù)加載B頁(yè)面，則在A頁(yè)面完全加載（可通過(guò)setTimeout模擬）后，打印當(dāng)前應(yīng)用所有webview，看是否包含B頁(yè)面的url，以此來(lái)分析。例如：在A頁(yè)面增加如下代碼：mui.plusReady(function()setTimeout(function()var array = plus.webview.all();if(array)for(var i=0,len=array.length;ilen;i+) console.log(arrayi.getURL(); ,5000);擴(kuò)展閱讀代碼塊激活字符:minitpreloadmpreload(單個(gè)webview)二、 事件管理事件綁定除了可以使用addEventListener()方法監(jiān)聽(tīng)某個(gè)特定元素上的事件外， 也可以使用.on()方法實(shí)現(xiàn)批量元素的事件綁定。.on( event , selector , handler ) eventType:String需監(jiān)聽(tīng)的事件名稱(chēng)，例如：tap selectorType:String選擇器 handlerType:Function(Eventevent )事件觸發(fā)時(shí)的回調(diào)函數(shù)，通過(guò)回調(diào)中的event參數(shù)可以獲得事件詳情示例點(diǎn)擊新聞列表，獲取當(dāng)前列表項(xiàng)的id，并將該id傳給新聞詳情頁(yè)面，然后打開(kāi)新聞詳情頁(yè)面mui(.mui-table-view).on(tap,.mui-table-view-cell,function() /獲取id var id = this.getAttribute(id); /傳值給詳情頁(yè)面，通知加載新數(shù)據(jù) mui.fire(detail,getDetail,id:id); /打開(kāi)新聞詳情 mui.openWindow( id:detail, url:detail.html );) 擴(kuò)展閱讀代碼塊激活字符:mmon事件取消使用on()方法綁定事件后，若希望取消綁定，則可以使用off()方法。off()方法根據(jù)傳入?yún)?shù)的不同，有不同的實(shí)現(xiàn)邏輯。version added: 2.0.0.off( event , selector , handler ) eventType:String需取消綁定的事件名稱(chēng)，例如：tap selectorType:String選擇器 handlerType:Function之前綁定到該元素上的事件函數(shù)，不支持匿名函數(shù)version added: 2.0.0.off( event , selector) eventType:String需取消綁定的事件名稱(chēng)，例如：tap selectorType:String選擇器version added: 2.2.0.off( event ) eventType:String需取消綁定的事件名稱(chēng)，例如：tapversion added: 2.2.0.off( ) 空參數(shù)，刪除該元素上所有事件示例off(event,selector,handle)適用于取消對(duì)應(yīng)選擇器上特定事件所執(zhí)行的特定回調(diào)，例如：/點(diǎn)擊li時(shí)，執(zhí)行foo_1函數(shù)mui(#list).on(tap,li,foo_1);/點(diǎn)擊li時(shí)，執(zhí)行foo_2函數(shù)mui(#list).on(tap,li,foo_2);function foo_1() console.log(foo_1 execute);function foo_2() console.log(foo_2 execute);/點(diǎn)擊li時(shí)，不再執(zhí)行foo_1函數(shù)，但會(huì)繼續(xù)執(zhí)行foo_2函數(shù)mui(#list).off(tap,li,foo_1);off(event,selector)適用于取消對(duì)應(yīng)選擇器上特定事件的所有回調(diào)，例如：/點(diǎn)擊li時(shí)，執(zhí)行foo_1函數(shù)mui(#list).on(tap,li,foo_1);/點(diǎn)擊li時(shí)，執(zhí)行foo_2函數(shù)mui(#list).on(tap,li,foo_2);function foo_1() console.log(foo_1 execute);function foo_2() console.log(foo_2 execute);/點(diǎn)擊li時(shí)，foo_2、foo_2兩個(gè)函數(shù)均不再執(zhí)行mui(#list).off(tap,li);off(event)適用于取消當(dāng)前元素上綁定的特定事件的所有回調(diào)，例如：/點(diǎn)擊li時(shí)，執(zhí)行foo_1函數(shù)mui(#list).on(tap,li,foo_1);/點(diǎn)擊p時(shí)，執(zhí)行foo_3函數(shù)mui(#list).on(tap,p,foo_3);function foo_1() console.log(foo_1 execute);function foo_3() console.log(foo_3 execute);/點(diǎn)擊li時(shí)，不再執(zhí)行foo_1函數(shù)；點(diǎn)擊p時(shí)，也不再執(zhí)行foo_3函數(shù)mui(#list).off(tap);off()適用于取消當(dāng)前元素上綁定的所有事件回調(diào)，例如：/點(diǎn)擊li時(shí)，執(zhí)行foo_1函數(shù)mui(#list).on(tap,li,foo_1);/雙擊li時(shí)，執(zhí)行foo_4函數(shù)mui(#list).on(doubletap,li,foo_4);/點(diǎn)擊p時(shí)，執(zhí)行foo_3函數(shù)mui(#list).on(tap,p,foo_3);function foo_1() console.log(foo_1 execute);function foo_3() console.log(foo_3 execute);function foo_4() console.log(foo_4 execute);/點(diǎn)擊li時(shí)，不再執(zhí)行foo_1函數(shù)；點(diǎn)擊p時(shí)，也不再執(zhí)行foo_3函數(shù)；雙擊li時(shí)，也不再執(zhí)行foo_4函數(shù)；mui(#list).off();擴(kuò)展閱讀代碼塊激活字符:mmoff事件觸發(fā)使用mui.trigger()方法可以動(dòng)態(tài)觸發(fā)特定DOM元素上的事件。.trigger( element , event , data ) elementType:Element觸發(fā)事件的DOM元素 eventType:String事件名字，例如：tap、swipeleft dataType:Object需要傳遞給事件的業(yè)務(wù)參數(shù)示例自動(dòng)觸發(fā)按鈕的點(diǎn)擊事件：var btn = document.getElementById(submit);/監(jiān)聽(tīng)點(diǎn)擊事件btn.addEventListener(tap,function () console.log(tap event trigger););/觸發(fā)submit按鈕的點(diǎn)擊事件mui.trigger(btn,tap);部分mui控件監(jiān)聽(tīng)的事件無(wú)法通過(guò)mui.trigger觸發(fā)比如無(wú)法實(shí)現(xiàn)自動(dòng)觸發(fā)mui返回圖標(biāo)，實(shí)現(xiàn)關(guān)閉當(dāng)前頁(yè)面的功能，該部分邏輯正在優(yōu)化中擴(kuò)展閱讀代碼塊激活字符:mtrigger手勢(shì)事件在開(kāi)發(fā)移動(dòng)端的應(yīng)用時(shí)，會(huì)用到很多的手勢(shì)操作，比如滑動(dòng)、長(zhǎng)按等，為了方便開(kāi)放者快速集成這些手勢(shì)，mui內(nèi)置了常用的手勢(shì)事件，目前支持的手勢(shì)事件見(jiàn)如下列表：分類(lèi)參數(shù)描述點(diǎn)擊tap單擊屏幕doubletap雙擊屏幕長(zhǎng)按longtap長(zhǎng)按屏幕hold按住屏幕release離開(kāi)屏幕滑動(dòng)swipeleft向左滑動(dòng)swiperight向右滑動(dòng)swipeup向上滑動(dòng)swipedown向下滑動(dòng)拖動(dòng)dragstart開(kāi)始拖動(dòng)drag拖動(dòng)中dragend拖動(dòng)結(jié)束手勢(shì)事件配置根據(jù)使用頻率，mui默認(rèn)會(huì)監(jiān)聽(tīng)部分手勢(shì)事件，如點(diǎn)擊、滑動(dòng)事件；為了開(kāi)發(fā)出更高性能的moble App，mui支持用戶根據(jù)實(shí)際業(yè)務(wù)需求，通過(guò)mui.init方法中的gestureConfig參數(shù)，配置具體需要監(jiān)聽(tīng)的手勢(shì)事件，。mui.init( gestureConfig: tap: true, /默認(rèn)為true doubletap: true, /默認(rèn)為false longtap: true, /默認(rèn)為false swipe: true, /默認(rèn)為true drag: true, /默認(rèn)為true hold:false,/默認(rèn)為false，不監(jiān)聽(tīng) release:false/默認(rèn)為false，不監(jiān)聽(tīng) );注意:dragstart、drag、dragend共用drag開(kāi)關(guān)，swipeleft、swiperight、swipeup、swipedown共用swipe開(kāi)關(guān)事件監(jiān)聽(tīng)單個(gè)元素上的事件監(jiān)聽(tīng)，直接使用addEventListener()即可，如下：elem.addEventListener(swipeleft,function() console.log(你正在向左滑動(dòng)););若多個(gè)元素執(zhí)行相同邏輯，則建議使用事件綁定(on()。擴(kuò)展閱讀代碼塊激活字符:minitgesture自定義事件在App開(kāi)發(fā)中，經(jīng)常會(huì)遇到頁(yè)面間傳值的需求，比如從新聞列表頁(yè)進(jìn)入詳情頁(yè)，需要將新聞id傳遞過(guò)去； Html5Plus規(guī)范設(shè)計(jì)了evalJS方法來(lái)解決該問(wèn)題； 但evalJS方法僅接收字符串參數(shù)，涉及多個(gè)參數(shù)時(shí)，需要開(kāi)發(fā)人員手動(dòng)拼字符串； 為簡(jiǎn)化開(kāi)發(fā)，mui框架在evalJS方法的基礎(chǔ)上，封裝了自定義事件，通過(guò)自定義事件，用戶可以輕松實(shí)現(xiàn)多webview間數(shù)據(jù)傳遞。僅能在5+ App及流應(yīng)用中使用因?yàn)槭嵌鄔ebview之間傳值，故無(wú)法在手機(jī)瀏覽器、微信中使用；監(jiān)聽(tīng)自定義事件添加自定義事件監(jiān)聽(tīng)操作和標(biāo)準(zhǔn)js事件監(jiān)聽(tīng)類(lèi)似，可直接通過(guò)window對(duì)象添加，如下：window.addEventListener(customEvent,function(event) /通過(guò)event.detail可獲得傳遞過(guò)來(lái)的參數(shù)內(nèi)容 .);觸發(fā)自定義事件通過(guò)mui.fire()方法可觸發(fā)目標(biāo)窗口的自定義事件：.fire( target , event , data ) targetType:WebviewObject需傳值的目標(biāo)webview eventType:String自定義事件名稱(chēng) dataType:JSONjson格式的數(shù)據(jù)目標(biāo)webview必須觸發(fā)loaded事件后才能使用自定義事件若新創(chuàng)建一個(gè)webview，不等該webview的loaded事件發(fā)生，就立即使用webview.evalJS()或mui.fire(webview,eventName,)，則可能無(wú)效；案例參考：這里示例假設(shè)如下場(chǎng)景：從新聞列表頁(yè)面進(jìn)入新聞詳情頁(yè)面，新聞詳情頁(yè)面為共用頁(yè)面，通過(guò)傳遞新聞ID通知詳情頁(yè)面需要顯示具體哪個(gè)新聞，詳情頁(yè)面再動(dòng)態(tài)向服務(wù)器請(qǐng)求數(shù)據(jù)，mui要實(shí)現(xiàn)類(lèi)似需求可通過(guò)如下步驟實(shí)現(xiàn)： 在列表頁(yè)面中預(yù)加載詳情頁(yè)面（假設(shè)為detail.html） 列表頁(yè)面在點(diǎn)擊新聞標(biāo)題時(shí)，首先，獲得該新聞id，觸發(fā)詳情頁(yè)面的newsId事件，并將新聞id作為事件參數(shù)傳遞過(guò)去；然后再打開(kāi)詳情頁(yè)面； 詳情頁(yè)面監(jiān)聽(tīng)newsId自定義事件列表頁(yè)面代碼如下：/初始化預(yù)加載詳情頁(yè)面mui.init( preloadPages: id:detail.html, url:detail.html );var detailPage = null;/添加列表項(xiàng)的點(diǎn)擊事件mui(.mui-content).on(tap, a, function(e) var id = this.getAttribute(id); /獲得詳情頁(yè)面 if(!detailPage) detailPage = plus.webview.getWebviewById(detail.html); /觸發(fā)詳情頁(yè)面的newsId事件 mui.fire(detailPage,newsId, id:id );/打開(kāi)詳情頁(yè)面 mui.openWindow( id:detail.html );); 詳情頁(yè)面代碼如下：/添加newId自定義事件監(jiān)聽(tīng)window.addEventListener(newsId,function(event) /獲得事件參數(shù) var id = event.detail.id; /根據(jù)id向服務(wù)器請(qǐng)求新聞詳情 .);擴(kuò)展閱讀代碼塊激活字符:mfire三、 mui工具類(lèi)initmui框架將很多功能配置都集中在mui.init方法中，要使用某項(xiàng)功能，只需要在mui.init方法中完成對(duì)應(yīng)參數(shù)配置即可，目前支持在mui.init方法中配置的功能包括：創(chuàng)建子頁(yè)面、關(guān)閉頁(yè)面、手勢(shì)事件配置、預(yù)加載、下拉刷新、上拉加載、設(shè)置系統(tǒng)狀態(tài)欄背景顏色。mui需要在頁(yè)面加載時(shí)初始化很多基礎(chǔ)控件,如監(jiān)聽(tīng)返回鍵,因此務(wù)必在每個(gè)頁(yè)面中調(diào)用以下各配置模塊在其對(duì)應(yīng)文檔中有詳細(xì)闡述,請(qǐng)點(diǎn)擊鏈接查看,這里只列出所有可配置項(xiàng)mui.init(/子頁(yè)面subpages: /.,/預(yù)加載 preloadPages: /. ,/下拉刷新、上拉加載 pullRefresh : /. ,/手勢(shì)配置 gestureConfig: /.,/側(cè)滑關(guān)閉swipeBack:true, /Boolean(默認(rèn)false)啟用右滑關(guān)閉功能/監(jiān)聽(tīng)Android手機(jī)的back、menu按鍵keyEventBind: backbutton: false, /Boolean(默認(rèn)true)關(guān)閉back按鍵監(jiān)聽(tīng)menubutton: false /Boolean(默認(rèn)true)關(guān)閉menu按鍵監(jiān)聽(tīng),/處理窗口關(guān)閉前的業(yè)務(wù)beforeback: function() /. /窗口關(guān)閉前處理其他業(yè)務(wù)詳情點(diǎn)擊 關(guān)閉頁(yè)面鏈接查看,/設(shè)置狀態(tài)欄顏色statusBarBackground: #9defbcg, /設(shè)置狀態(tài)欄顏色,僅iOS可用preloadLimit:5/預(yù)加載窗口數(shù)量限制(一旦超出,先進(jìn)先出)默認(rèn)不限制)以上各配置模塊在其對(duì)應(yīng)文檔中有詳細(xì)闡述,請(qǐng)點(diǎn)擊鏈接查看,以下只補(bǔ)充單獨(dú)配置項(xiàng)通過(guò)statusBarBackground:rgb屬性設(shè)置狀態(tài)欄顏色（iOS7.0+、安卓不支持）格式為#RRGGBB。mui.init(statusBarBackground: #9defbcg,)mui默認(rèn)會(huì)監(jiān)聽(tīng)Android手機(jī)的物理按鍵(back&menu),若不希望自動(dòng)處理按鍵可通過(guò)以下方式關(guān)閉mui.init(/監(jiān)聽(tīng)Android手機(jī)的back、menu按鍵keyEventBind: backbutton: true, /Boolean(默認(rèn)true)關(guān)閉back按鍵監(jiān)聽(tīng)menubutton: true /Boolean(默認(rèn)true)關(guān)閉menu按鍵監(jiān)聽(tīng),)擴(kuò)展閱讀代碼塊激活字符:minitmui()mui使用css選擇器獲取HTML元素，返回mui對(duì)象數(shù)組。mui(p)：選取所有元素mui(p.title)：選取所有包含.title類(lèi)的元素若要將mui對(duì)象轉(zhuǎn)化成dom對(duì)象，可使用如下方法（類(lèi)似jquery對(duì)象轉(zhuǎn)成dom對(duì)象）：/obj1是mui對(duì)象var obj1 = mui(#title);/obj2是dom對(duì)象var obj2 = obj10; MUI框架的定位是“最接近原生體驗(yàn)的移動(dòng)App的UI框架”， 因此和jQuery有所區(qū)別，很少為簡(jiǎn)化DOM操作而封裝API，具體可參考MUI產(chǎn)品概述； 該函數(shù)的設(shè)計(jì)目的，更多是為了配合MUI插件使用，比如圖片輪播、下拉刷新、區(qū)域滾動(dòng)等，如下為詳細(xì)示例：示例1：跳轉(zhuǎn)到圖片輪播的第二張圖片mui(.mui-slider).slider().gotoItem(1);示例2：重新開(kāi)啟上拉加載mui(#pullup-container).pullRefresh().refresh(true);擴(kuò)展閱讀代碼塊激活字符:mmuieach()each既是一個(gè)類(lèi)方法，同時(shí)也是一個(gè)對(duì)象方法，兩個(gè)方法適用場(chǎng)景不同；換言之，你可以使用mui.each()去遍歷數(shù)組或json對(duì)象，也可以使用mui(selector).each()去遍歷DOM結(jié)構(gòu)。mui.each( obj , handler ) objType:Array|JSONObj需遍歷的對(duì)象或數(shù)組；若為對(duì)象，僅遍歷對(duì)象根節(jié)點(diǎn)下的key handlerType:Function(Integer|Stringindex,Anythingelement)為每個(gè)元素執(zhí)行的回調(diào)函數(shù)；其中，index表示當(dāng)前元素的下標(biāo)或key，element表示當(dāng)前匹配元素mui(selector).each( handler ) handlerType:Function(Integerindex,Elementelement)為每個(gè)匹配元素執(zhí)行的回調(diào)函數(shù)；其中，index表示當(dāng)前元素在匹配元素中的位置（下標(biāo)，從0開(kāi)始），element表示當(dāng)前匹配元素，可用this關(guān)鍵字代替示例1輸出當(dāng)前數(shù)組中每個(gè)元素的平方var array = 1,2,3mui.each(array,function(index,item) console.log(item*item);) 示例2當(dāng)前頁(yè)面中有三個(gè)字段，如下： 字段1： 字段2： 字段3： 提交時(shí)校驗(yàn)三個(gè)字段均不能為空，若為空則提醒并終止業(yè)務(wù)邏輯運(yùn)行，使用each()方法循環(huán)校驗(yàn)，如下：var check = true;mui(.mui-input-group input).each(function () /若當(dāng)前input為空，則alert提醒 if(!this.value|trim(this.value)=) var label = this.previousElementSibling; mui.alert(label.innerText+不允許為空); check = false; return false; );/校驗(yàn)通過(guò)，繼續(xù)執(zhí)行業(yè)務(wù)邏輯if(check) /.擴(kuò)展閱讀代碼塊激活字符:meachmmeach(遍歷DOM)extend()將兩個(gè)對(duì)象合并成一個(gè)對(duì)象。.extend( target , object1 , objectN ) targetType:Object需合并的目標(biāo)對(duì)象 object1Type:Object需合并的對(duì)象 objectNType:Object需合并的對(duì)象.extend( deep , target , object1 , objectN ) deepType:Boolean若為true，則遞歸