MUI使用總結
最近專案中需要使用MUI做一個視訊播放的小功能。我就花時間研究了一下MUI。
MUI是一個使用JavaScript/">JavaScript開發Android和IOS應用的前端框架。這篇文章將以知識樹的形式對MUI的使用做一個總結，一些官方文件中的東西我都只大致提一下，如果需要詳細瞭解可以進入官方文件瞭解詳情。
UI元件
元件部分不多說，詳情可以看ofollow,noindex" target="_blank">官方文件 。
小技巧：Dialog 元件正常情況下是無法解析HTML內容的，如果需要對Dialog 元件的內容進行定製可以將Dialog 的最後一個引數type設定為'div'。
MUI選擇器
MUI的選擇器類似Jquery，主要有#id選擇器、.class選擇器 標籤選擇器，組合選擇器。
mui('#id')
mui('.class')
mui('input')
mui('p.class')
和Jquery一樣，如果想從mui選擇器選中的元素中取出原生的DOM元素，只需取出mui('#id')[0]
即可。
MUI的常用方法
MUI並沒有像Jquery一樣豐富的方法，常用的方法並不多。
事件相關的方法
MUI物件方法
on(event, selector, handler)
批量繫結事件
one(event, selector, handler)
批量繫結事件但是隻生效一次
off([event][, selector])
刪除事件
MUI靜態方法
trigger(element, event, data)
觸發事件
fire(target, event, data)
觸發自定義事件
原生事件監聽方法
addEventListener(event, handler)
單個DOM節點繫結事件
手勢事件
頁面相關方法
init(options)
頁面初始化設定。目前支援在mui.init方法中配置的功能包括：建立子頁面 、關閉頁面 、手勢事件配置 、預載入 、下拉重新整理 、上拉載入 、設定系統狀態列背景顏色 。
openWindow(options)
開啟新頁面
back()
關閉當前頁面
其他工具方法
此部分官方文件都寫得非常詳細，如果哪個方法不懂可以直接點選連線跳轉至官方文件詳細檢視。
MUI物件方法
each(handler)
遍歷
MUI靜態方法
each(obj, handler)
遍歷
[extend([deep, ]target, obj1[,objN])](http://dev.dcloud.net.cn/mui/...
合併多個物件
later(func,delay)
setTimeOut封裝
scrollTo(ypos[,duration)](http://dev.dcloud.net.cn/mui/...
滾動視窗螢幕到指定位置，該方法是對window.scrollTo()
方法在手機端的增強實現，可設定滾動動畫時間及滾動結束後的回撥函式;鑑於手機螢幕大小，該方法僅可實現螢幕縱向滾動。
os
我們經常會有通過navigator.userAgent
判斷當前執行環境的需求,mui對此進行了封裝,通過呼叫mui.os.XXX即可
-
plus(可以訪問的引數為:)
.plus：返回是否在 5+ App(包括流應用)執行
.stream：返回是否為流應用
-
Android(可以訪問的引數為:)
.android：返回是否為安卓手機
.version：安卓版本號
.isBadAndroid：android非Chrome環境
-
iOS(可以訪問的引數為:)
.ios：返回是否為蘋果裝置
.version：返回手機版本號
.iphone：返回是否為蘋果手機
.ipad：返回是否為ipad
-
Wechat(可以訪問的引數為:)
.wechat：返回是否在微信中執行
AJAX方法
類似JQuery主要由ajax(options)、post(url,params,callback)、get(url,params,callback)
,詳情可參考官方文件
。
MUI外掛方法
示例1：跳轉到圖片輪播的第二張圖片
mui('.mui-slider').slider().gotoItem(1);
示例2：重新開啟上拉載入
mui('#pullup-container').pullRefresh().refresh(true);
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均不受影響。