mui開發(fā)文檔.doc

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