mui-知識總結

1. MUI + SDK 使用筆記：  
2.   
3. MUI是什麼：http://ask.dcloud.net.cn/article/91  
4.   
5. /*  MUI 使用說明： 
6.  * 
7.  *  1.每個用到mui的頁面都呼叫下mui.init。 
8.  *  2.如果需要使用大H5+物件，就寫到plusReady中，如plus物件。 
9.  */  
10.   
11. ”‘【MUI開發注意事項】———————————————————————————–  
12.   
13.    //1.【固定欄靠前】  
14.          
15.          所謂的固定欄：也就是帶有.mui-bar屬性的節點  
16.             (.mui-bar-nav）  
17.             (.mui-bar-footer)  
18.             (.mui-bar-tab）  
19.          這些元素使用時需遵循一個規則：放在.mui-content元素之前  
20.           
21.   
22.    //2.【一切內容都要包裹在mui-content中】    
23.           
24.            除了固定欄之外，其它內容都要包裹在.mui-content中  
25.            
26.   
27.    //3.【始終為button按鈕新增type屬性】  
28.           
29.           若button按鈕沒有type屬性，瀏覽器預設按照type=submit邏輯處理，  
30.           這樣若將沒有type的button放在form表單中，點選按鈕就會執行form表單提交，頁面就會重新整理，使用者體驗極差  
31.           
32.   
33.    //4.【視窗管理】  
34.   
35.           //4.1 頁面初始化：必須執行mui.init方法  
36.               
37.                mui在頁面初始化時，初始化了很多引數配置，比如：  
38.                按鍵監聽、手勢監聽等，因此mui頁面都必須呼叫一次mui.init()方法；  
39.              
40.           //4.2 頁面跳轉：拋棄href跳轉  
41.               
42.                mui.openWindow方法開啟一個新的webview，mui會自動監聽新頁面的loaded事件，  
43.                若載入完畢，再自動顯示新頁面；  
44.               
45.   
46.            //4.3 頁面關閉：勿重複監聽backbutton  
47.              
48.                則需要重寫mui.back方法，切勿簡單通過addEventListener新增backbutton監聽，  
49.                因為addEventListener只會增加新的執行程式，mui預設封裝的監聽執行邏輯依然會繼續執行，  
50.                因此若僅addEventListener新增使用者確認框，則使用者即使選擇了取消，也會繼續關閉視窗。  
51.               
52.   
53.    //5.【手勢操作】  
54.   
55.             // 點選：忘記click  
56.                 mui為了解決這個問題，封裝了tap事件，因此在任何點選的時候，請忘記click及onclick操作，  
57.                 統統使用如下程式碼：  
58.                 element.addEventListener(’tap’,function(){  
59.                         //點選響應邏輯  
60.                     });  
61.                 // 或者  
62.                 mui.(#select).on(”tap”,“li”.funcation(){  
63.                        //點選響應邏輯  
64.                 });  
65.   
66.    //6.【常見錯誤 Uncaught ReferenceError: plus is not defined】  
67.             
68.                在app開發中，若要使用HTML5+擴充套件api，必須等plusready事件發生後才能正常使用，  
69.                否則可能會報“plus is not defined”的錯誤；  
70.                mui為簡化開發，將plusReady事件封裝成了mui.plusReady()方法，  
71.                凡涉及到HTML5+的api，建議都寫在mui.plusReady方法中；  
72.             
73.   
74.   
75. ”‘【mui適用場景說明】————————————————————————————-  
76.   
77.         為解決HTML5在低端Android機上的效能缺陷，mui引入了原生加速，其中最關鍵的就是webview控制元件，  
78.         因此mui若要發揮其全部能力，需和5+ App配合適用，若脫離5+ App，mui功能會受限，主要涉及三個部分：  
79.         詳細參考：http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/113  
80.   
81.   
82. ”‘【如何自定義mui控制元件樣式】——————————————————————————-  
83.      
84.         參考：http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/87  
85.   
86. ”‘【如何自定義icon圖示】——————————————————————————-  
87.   
88.         //1. 選擇相簿：(以淘寶素材庫為例)  
89.   
90.              淘寶：          http://iconfont.cn/collections?spm=a313x.7781069.0.0.KmfS4h  
91.              ICO Moon：      https://icomoon.io/app/#/select  
92.              Font Awesome:   http://www.bootcss.com/p/font-awesome/  
93.   
94.         //2. 找到所需素材下載到本地（包含 css 和ttf檔案）  
95.   
96.   
97.         //3. 修改 iconfont.css 檔案中的 【@font-face】  
98.   
99.               保留所需的 ttf字型即可,如下:修改url增加相對路徑 src:url(’…/fonts/’);  
100.   
101.               @font-face {font-family: “iconfont”;  
102.                   src:url(’…/fonts/iconfont.ttf’) format(‘truetype’); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/  
103.                }  
104.   
105.   
106.         //4. 將 iconfont.css 拷貝到專案的fonts目錄下，iconfont.ttf 拷貝到專案的css目錄下。  
107.         
108.         //5. mui中使用：  
109.   
110.             //     class ：  
111.             //     mui-icon ：寫死  
112.             //     iconfont ：自定義圖片字型的類名  
113.             //     icon-nanzhuang ： 自定義的icon名字  
114.             <span class=“mui-icon iconfont icon-nanzhuang”></span>  
115.   
116.         
117. ”‘【如何判斷預載入是否生效】——————————————————————————-  
118.           
119.         1. 直觀判斷，預載入成功開啟新頁面很快不會有載入等待  
120.         2. log分析  
121.   
122.   
123.   
124.   
125. ”‘【MUI_JavaScript 函式 http://dev.dcloud.net.cn/mui/util/】——————————————————————————-  
126.       
127. 【視窗管理】  
128.       
129.      //1.初始化MUI 和 準備 mui.init(); / mui.plusReady()；  
130.              
131.            目前支援在mui.init方法中配置的功能包括：  
132.            建立子頁面、關閉頁面、手勢事件配置、預載入、下拉重新整理、上拉載入、設定系統狀態列背景顏色  
133.            程式碼案列：  
134.            mui.init({  
135.                //子頁面  
136.                 subpages: [{  
137.                       url:your-subpage-url,//子頁面HTML地址，支援本地地址和網路地址  
138.                       id:your-subpage-id,//子頁面標誌  
139.                       styles:{  
140.                         top:subpage-top-position,//子頁面頂部位置  
141.                         bottom:subpage-bottom-position,//子頁面底部位置  
142.                         width:subpage-width,//子頁面寬度，預設為100%  
143.                         height:subpage-height,//子頁面高度，預設為100%  
144.                         ……  
145.                       },  
146.                       extras:{}//額外擴充套件引數  
147.                   }],  
148.                //預載入  
149.                  preloadPages:[  
150.                  {  
151.                       url:prelaod-page-url,  
152.                       id:preload-page-id,  
153.                       styles:{},//視窗引數  
154.                       extras:{},//自定義擴充套件引數  
155.                       subpages:[{},{}]//預載入頁面的子頁面  
156.                     }  
157.                 ],  
158.                //下拉重新整理  
159.                 pullRefresh : {  
160.                    //…  
161.                     },  
162.                //上拉載入  
163.                 pullRefresh : {  
164.                    //…  
165.                 },  
166.                 //手勢配置  
167.                  gestureConfig:{  
168.                    //…  
169.                 },  
170.                 //側滑關閉  
171.                 swipeBack:true, //Boolean(預設false)啟用右滑關閉功能  
172.                //監聽Android手機的back、menu按鍵  
173.                 keyEventBind: {  
174.                     backbutton: false,  //Boolean(預設truee)關閉back按鍵監聽  
175.                     menubutton: false   //Boolean(預設true)關閉back按鍵監聽  
176.                 },  
177.                //處理視窗關閉前的業務  
178.                 beforeback: function() {  
179.                     //… //視窗關閉前處理其他業務詳情點選 ↑ ”關閉頁面”連結檢視  
180.                 },  
181.                //設定狀態列顏色  
182.                statusBarBackground: ’#9defbcg’, //設定狀態列顏色,僅iOS可用  
183.              });  
184.          //在app開發中，若要使用HTML5+擴充套件api，必須等plusready事件發生後才能正常使用mui.plusReady();  
185.   
186.   
187.     // 2.開啟新頁面  
188.   
189.           mui.openWindow({  
190.                 url:new-page-url,  
191.                 id:new-page-id,  
192.                 styles:{  
193.                   top:newpage-top-position,//新頁面頂部位置  
194.                   bottom:newage-bottom-position,//新頁面底部位置  
195.                   width:newpage-width,//新頁面寬度，預設為100%  
196.                   height:newpage-height,//新頁面高度，預設為100%  
197.                   ……  
198.                 },  
199.                 extras:{  
200.                   …..//自定義擴充套件引數，可以用來處理頁面間傳值  
201.                 },  
202.                 createNew:false,//是否重複建立同樣id的webview，預設為false:不重複建立，直接顯示  
203.                 show:{  
204.                   autoShow:true,//頁面loaded事件發生後自動顯示，預設為true  
205.                   aniShow:animationType,//頁面顯示動畫，預設為”slide-in-right“；  
206.                   duration:animationTime//頁面動畫持續時間，Android平臺預設100毫秒，iOS平臺預設200毫秒；  
207.                 },  
208.                 waiting:{  
209.                   autoShow:true,//自動顯示等待框，預設為true  
210.                   title:’正在載入…’,//等待對話方塊上顯示的提示內容  
211.                   options:{  
212.                     width:waiting-dialog-widht,//等待框背景區域寬度，預設根據內容自動計算合適寬度  
213.                     height:waiting-dialog-height,//等待框背景區域高度，預設根據內容自動計算合適高度  
214.                     ……  
215.                   }  
216.                 }  
217.              })  
218.               
219.   
220.     // 3.關閉頁面  
221.   
222.            mui框架將視窗關閉功能封裝在mui.back方法中，具體執行邏輯是：  
223.            若當前webview為預載入頁面，則hide當前webview；  
224.            否則，close當前webview；  
225.   
226.            在mui框架中，有三種操作會觸發頁面關閉（執行mui.back方法）：  
227.   
228.            // 使用參考（http://dev.dcloud.net.cn/mui/window/#openwindow）  
229.   
230.            1. 點選包含.mui-action-back類的控制元件  
231.            2. 在螢幕內，向右快速滑動  
232.            3. Android手機按下back按鍵  
233.   
234.            ””‘ 除了如上三種操作外，也可以直接呼叫mui.back()方法，執行視窗關閉邏輯；  
235.   
236.     // 4.預載入頁面  
237.          方式一：通過mui.init方法中的preloadPages引數進行配置.  
238.          /* 
239.            優點:1.可預載入多個頁面 
240.            缺點:1. 不會返回預載入每個頁面的引用， 
241.                 2.獲得對應webview引用，plus.webview.getWebviewById方式獲得 
242.                 3.是非同步執行，執行完mui.init方法後立即獲得對應webview引用可能會失敗 
243.           */  
244.             mui.init({  
245.               preloadPages:[  
246.                 {  
247.                   url:prelaod-page-url,  
248.                   id:preload-page-id,  
249.                   styles:{},//視窗引數  
250.                   extras:{},//自定義擴充套件引數  
251.                   subpages:[{},{}]//預載入頁面的子頁面  
252.                 }  
253.               ],  
254.               preloadLimit:5//預載入視窗數量限制(一旦超出,先進先出)預設不限制  
255.             });  
256.   
257.         方式二：通過mui.preload方法預載入.// 可立即返回對應webview的引用，但一次僅能預載入一個頁面  
258.             /* 
259.               優點:1.可立即返回對應webview的引用 
260.               缺點:1. 但一次僅能預載入一個頁面 
261.           */  
262.              var page = mui.preload({  
263.                 url:new-page-url,  
264.                 id:new-page-id,//預設使用當前頁面的url作為id  
265.                 styles:{},//視窗引數  
266.                 extras:{}//自定義擴充套件引數  
267.             });  
268.   
269.   
270. 【事件管理】  
271.   
272.       // 1.事件繫結：addEventListener() / .on()  
273.   
274.            除了可以使用[【addEventListener()】方法監聽某個特定元素上的事件外， 也可以使用【.on()】方法實現批量元素的事件繫結。  
275.   
276.            ””‘ 【 .on( event , selector , handler ) 】  
277.                 event  
278.                 Type: String  
279.                 需監聽的事件名稱，例如：’tap’  
280.                 selector  
281.                 Type: String  
282.                 選擇器  
283.                 handler  
284.                 Type: Function( Event event )  
285.                 事件觸發時的回撥函式，通過回撥中的event引數可以獲得事件詳情  
286.   
287.       //2.事件取消：off()  
288.   
289.           ””‘ 【 .off( event , selector , handler ) 】  
290.                 event  
291.                 Type: String  
292.                 需取消繫結的事件名稱，例如：’tap’  
293.                 selector  
294.                 Type: String  
295.                 選擇器  
296.                 handler  
297.                 Type: Function  
298.                 之前繫結到該元素上的事件函式，不支援匿名函式  
299.   
300.           ””‘ 【 .off( event , selector) 】  
301.                 event  
302.                 Type: String  
303.                 需取消繫結的事件名稱，例如：’tap’  
304.                 selector  
305.                 Type: String  
306.                 選擇器  
307.   
308.           ””‘ 【 .off( event ) 】  
309.                 event  
310.                 Type: String  
311.                 需取消繫結的事件名稱，例如：’tap’  
312.           ””‘ 【 .off( ) 】  
313.                 空引數，刪除該元素上所有事件  
314.   
315.       // 3. 事件觸發  mui.trigger() 使用mui.trigger()方法可以動態觸發特定DOM元素上的事件。  
316.         
317.           ””‘ 【.trigger( element , event , data )】  
318.                element  
319.                Type: Element  
320.                觸發事件的DOM元素  
321.                event  
322.                Type: String  
323.                事件名字，例如：’tap’、‘swipeleft’  
324.                data  
325.                Type: Object  
326.                需要傳遞給事件的業務引數  
327.   
328.                // 示例 自動觸發按鈕的點選事件：  
329.                var btn = document.getElementById(”submit”);  
330.                 //監聽點選事件  
331.                 btn.addEventListener(”tap”,function () {  
332.                   console.log(”tap event trigger”);  
333.                 });  
334.                 //觸發submit按鈕的點選事件  
335.                 mui.trigger(btn,’tap’);  
336.   
337.       //4. 手勢事件  
338.   
339.                 分類      引數         描述  
340.                —————————————-  
341.                         |    tap      |  單擊螢幕  
342.                  點選   ——————————-  
343.                         |  doubletap  |  雙擊螢幕  
344.                —————————————-  
345.                         |  longtap    |  長按螢幕  
346.                         ——————————-  
347.                  長按 |    hold     |  按住螢幕  
348.                         ——————————-  
349.                         |  release    |  離開螢幕  
350.                —————————————-  
351.                         |  swipeleft  |  向左滑動  
352.                         ——————————-  
353.                         |  swiperight |  向右滑動  
354.                 滑動  ——————————-  
355.                         |   swipeup   |  向上滑動  
356.                         ——————————-  
357.                         |  swipedown  |  向下滑動  
358.               —————————————–  
359.                         |   dragstart |  開始拖動  
360.                         ——————————-  
361.                         |   drag      |  拖動中  
362.                 拖動  ——————————-  
363.                         |   dragend   |  拖動結束  
364.               —————————————–  
365.   
366.            使用：通過mui.init方法中的gestureConfig引數，配置具體需要監聽的手勢事  
367.   
368.            /** 
369.               注意:dragstart、drag、dragend共用drag開關，swipeleft、swiperight、swipeup、swipedown共用swipe開關*/  
370.              
371.               // 配置：  
372.               mui.init({  
373.                    gestureConfig:{  
374.                        tap: true,         //預設為true  
375.                        doubletap: true,   //預設為false  
376.                        longtap: true,     //預設為false  
377.                        swipe: true,       //預設為true  
378.                        drag: true,        //預設為true  
379.                        hold:false,        //預設為false，不監聽  
380.                        release:false      //預設為false，不監聽  
381.                   }  
382.                 });  
383.   
384.               // 使用：  
385.   
386.               單個元素上的事件監聽，直接使用addEventListener(0即可，如下：  
387.   
388.               elem.addEventListener(”swipeleft”,function(){  
389.                      console.log(”你正在向左滑動”);  
390.                 });  
391.   
392.               若多個元素執行相同邏輯，則建議使用事件繫結(on())。  
393.            */  
394.   
395.   
396.   
397.       //5. 自定義事件：（頁面傳值）  
398.       
399.           5.1 新增自定義事件監聽操作和標準js事件監聽類似，可直接通過window物件新增，如下：  
400.   
401.               window.addEventListener(’customEvent’,function(event){  
402.                 //通過event.detail可獲得傳遞過來的引數內容  
403.                  ….  
404.               });  
405.      
406.            5.2 觸發自定義事件,通過mui.fire()方法可觸發目標視窗的自定義事件：   
407.                目標webview必須觸發loaded事件後才能使用自定義事件  
408.                
409.              ””‘ 【 .fire( target , event , data ) 】  
410.                         target  
411.                         Type: WebviewObject  
412.                         需傳值的目標webview  
413.                         event  
414.                         Type: String  
415.                         自定義事件名稱  
416.                         data  
417.                         Type: JSON  
418.                         json格式的資料  
419.   
420.   
421.             /** 實列： 
422.  
423.               【A.html】 
424.  
425.                 1. 預載入B.html頁面  preload() 
426.  
427.                 mui.plusReady(function() { 
428.                     var page = mui.preload({ 
429.                                 url:’examples/zidingyi.html’, 
430.                                 id:’zcmain’ 
431.                         }); 
432.                 }); 
433.  
434.                 2. 觸發自定義事件 
435.  
436.                 var webviews = plus.webview.getWebviewById(“zcmain”);         // 根據Id 獲取B.html 的webview 
437.                         alert(“webviews = ” + webviews); 
438.                         mui.fire(webviews,’intents’,{zcmains:’zhangchao’});   // 像B.html頁面傳遞引數 
439.                         mui.openWindow({                                      // 開啟B.html 
440.                             url:’examples/zidingyi.html’, 
441.                             id:’zcmain’ 
442.                         }); 
443.  
444.                【B.html】 
445.  
446.                    1. 監聽自定義事件 獲取去A.html 頁面傳遞過來的資料 
447.                    window.addEventListener(‘intents’,function(event){ 
448.                       //獲得事件引數 
449.                       var id = event.detail.zcmains; 
450.                       alert(“id = ” + id); 
451.                       //根據id向伺服器請求新聞詳情 
452.                     }); 
453.             * 
454.             */  
455.               
456.   
457. 【utils】  
458.        
459.       1. init();  // 初始化  
460.              
461.            建立子頁面、關閉頁面、手勢事件配置、預載入、下拉重新整理、上拉載入、設定系統狀態列背景顏色（僅支援ios）。  
462.         
463.       2. mui(); // mui使用css選擇器獲取HTML元素，返回mui物件陣列。  
464.   
465.            mui(”p”)：選取所有<p>元素  
466.            mui(”p.title”)：選取所有包含.title類的<p>元素  
467.            mui(”#loginbt”); 選取id為loginbt的元素  
468.            mui(”.registerbt”);選取class為registerbt的元素  
469.            //若要將mui物件轉化成dom物件，可使用如下方法（類似jquery物件轉成dom物件）：  
470.            //obj1是mui物件  
471.                var obj1 = mui(”#title”);  
472.            //obj2是dom物件  
473.                var obj2 = obj1[0];   
474.            
475.       3. each() // 既是一個類方法，同時也是一個物件方法  
476.   
477.          mui.each( obj , handler )  
478.          obj  
479.          Type: Array||JSONObj  
480.          需遍歷的物件或陣列；若為物件，僅遍歷物件根節點下的key  
481.          handler  
482.          Type: Function( Integer||String index,Anything element)  
483.          為每個元素執行的回撥函式；其中，index表示當前元素的下標或key，element表示當前匹配元素  
484.          // each 遍歷陣列/json字串  
485.          var array = [1,2,3];          // 陣列  
486.          var str = {”name”:“zcmain”,“age”:“30”,“sex”:“男”};  // json字串  
487.          each_array.addEventListener(’tap’,function(){  
488.          // 遍歷json字串  
489.          mui.each(str,function(index,item){  
490.               log(”index = ” + index + “\nitem = ” + item);  
491.             });  
492.          // 遍歷陣列  
493.          mui.each(array,function(index,item){  
494.               log(”index = ” + index + “\nitem = ” + item);  
495.             });  
496.          });  
497.   
498.  &nbs