摘要：預(yù)加載自定義事件第三方擴(kuò)展插件涉及的，除了，其它所有手機(jī)瀏覽器及瀏覽器均無法使用，目前主要包括語音輸入事件相關(guān)注意瀏覽器沒有事件事件相關(guān)的，手機(jī)端瀏覽器均可使用端模擬手機(jī)瀏覽器也可以正常使用。

最近項(xiàng)目中需要使用MUI做一個(gè)視頻播放的小功能。我就花時(shí)間研究了一下MUI。

MUI是一個(gè)使用JavaScript開發(fā)Android和IOS應(yīng)用的前端框架。這篇文章將以知識(shí)樹的形式對(duì)MUI的使用做一個(gè)總結(jié)，一些官方文檔中的東西我都只大致提一下，如果需要詳細(xì)了解可以進(jìn)入官方文檔了解詳情。

組件部分不多說，詳情可以看官方文檔。

小技巧：Dialog 組件正常情況下是無法解析HTML內(nèi)容的，如果需要對(duì)Dialog 組件的內(nèi)容進(jìn)行定制可以將Dialog 的最后一個(gè)參數(shù)type設(shè)置為"div"。

MUI的選擇器類似Jquery，主要有#id選擇器、.class選擇器 標(biāo)簽選擇器，組合選擇器。

mui("#id")
mui(".class")
mui("input")
mui("p.class")

和Jquery一樣，如果想從mui選擇器選中的元素中取出原生的DOM元素，只需取出mui("#id")[0]即可。

MUI并沒有像Jquery一樣豐富的方法，常用的方法并不多。

on(event, selector, handler) 批量綁定事件

one(event, selector, handler) 批量綁定事件但是只生效一次

off([event][, selector]) 刪除事件

trigger(element, event, data) 觸發(fā)事件

fire(target, event, data) 觸發(fā)自定義事件

addEventListener(event, handler) 單個(gè)DOM節(jié)點(diǎn)綁定事件

手勢(shì)事件

init(options)

頁面初始化設(shè)置。目前支持在mui.init方法中配置的功能包括：創(chuàng)建子頁面、關(guān)閉頁面、手勢(shì)事件配置、預(yù)加載、下拉刷新、上拉加載、設(shè)置系統(tǒng)狀態(tài)欄背景顏色。

openWindow(options)

打開新頁面

back()

關(guān)閉當(dāng)前頁面

此部分官方文檔都寫得非常詳細(xì)，如果哪個(gè)方法不懂可以直接點(diǎn)擊連接跳轉(zhuǎn)至官方文檔詳細(xì)查看。

each(handler)

遍歷

each(obj, handler)

遍歷

[extend([deep, ]target, obj1[,objN])](http://dev.dcloud.net.cn/mui/...

合并多個(gè)對(duì)象

later(func,delay)

setTimeOut封裝

scrollTo(ypos[,duration)](http://dev.dcloud.net.cn/mui/...

滾動(dòng)窗口屏幕到指定位置，該方法是對(duì)window.scrollTo()方法在手機(jī)端的增強(qiáng)實(shí)現(xiàn)，可設(shè)定滾動(dòng)動(dòng)畫時(shí)間及滾動(dòng)結(jié)束后的回調(diào)函數(shù);鑒于手機(jī)屏幕大小，該方法僅可實(shí)現(xiàn)屏幕縱向滾動(dòng)。

os

我們經(jīng)常會(huì)有通過navigator.userAgent判斷當(dāng)前運(yùn)行環(huán)境的需求,mui對(duì)此進(jìn)行了封裝,通過調(diào)用mui.os.XXX即可

plus(可以訪問的參數(shù)為:)

.plus：返回是否在 5+ App(包括流應(yīng)用)運(yùn)行

.stream：返回是否為流應(yīng)用

Android(可以訪問的參數(shù)為:)

.android：返回是否為安卓手機(jī)

.version：安卓版本號(hào)

.isBadAndroid：android非Chrome環(huán)境

iOS(可以訪問的參數(shù)為:)

.ios：返回是否為蘋果設(shè)備

.version：返回手機(jī)版本號(hào)

.iphone：返回是否為蘋果手機(jī)

.ipad：返回是否為ipad

Wechat(可以訪問的參數(shù)為:)

.wechat：返回是否在微信中運(yùn)行

類似JQuery主要由ajax(options)、post(url,params,callback)、get(url,params,callback),詳情可參考官方文檔。

示例1：跳轉(zhuǎn)到圖片輪播的第二張圖片

mui(".mui-slider").slider().gotoItem(1);

示例2：重新開啟上拉加載

mui("#pullup-container").pullRefresh().refresh(true);

為解決HTML5在低端Android機(jī)上的性能缺陷，mui引入了原生加速，其中最關(guān)鍵的就是webview控件，因此mui若要發(fā)揮其全部能力，需和5+ App配合適用，若脫離5+ App，mui功能會(huì)受限，主要涉及三個(gè)部分：

涉及webview的，除了5+App，其它所有手機(jī)瀏覽器及PC瀏覽器均無法使用，涉及功能點(diǎn)包括：

webview模式窗體動(dòng)畫

創(chuàng)建子窗口（除了為解決區(qū)域滾動(dòng)的常見雙webview場景，還涉及webview模式的選項(xiàng)卡等多webview場景）

webview模式的側(cè)滑菜單（也有div方式側(cè)滑菜單）

webview模式的tab選項(xiàng)卡（也有div方式選項(xiàng)卡）

nativeUI，如原生的警告框、確認(rèn)框、popover、actionsheet、toast。這些也有HTML5的實(shí)現(xiàn)。

預(yù)加載

自定義事件

涉及webview的，除了5+App，其它所有手機(jī)瀏覽器及PC瀏覽器均無法使用，目前主要包括：語音輸入；

Touch事件相關(guān)的，手機(jī)端瀏覽器均可使用、pc端chrome模擬手機(jī)瀏覽器也可以正常使用。
但普通PC端瀏覽器因?yàn)闆]有touch事件，可以顯示控件但滑動(dòng)操作功能會(huì)受限；涉及功能點(diǎn)包括：

手勢(shì)事件

mui封裝的tap相關(guān)處理業(yè)務(wù)：折疊面板、二級(jí)列表、二級(jí)選項(xiàng)卡；

mui封裝的swipe、drag相關(guān)處理業(yè)務(wù)：圖片輪播、可左右滑動(dòng)的圖文表格、可左右滑動(dòng)的9宮格、滑動(dòng)觸發(fā)列表項(xiàng)菜單、可拖動(dòng)式側(cè)滑菜單、下拉刷新和上拉加載、可拖動(dòng)式選項(xiàng)卡
【備注】：在PC端，大家將tap替換成click，將HTML5默認(rèn)的Drag事件替換mui 的swipe和drag，就可以解決如上兩個(gè)問題。

除上述列出的功能點(diǎn)，其它mui功能，均可以在其它手機(jī)瀏覽器及PC服務(wù)端使用，所有CSS均不受影響。