MUI使用總結

最近項目中須要使用MUI作一個視頻播放的小功能。我就花時間研究了一下MUI。

MUI是一個使用JavaScript開發Android和IOS應用的前端框架。這篇文章將以知識樹的形式對MUI的使用作一個總結，一些官方文檔中的東西我都只大體提一下，若是須要詳細瞭解能夠進入官方文檔瞭解詳情。

UI組件

組件部分很少說，詳情能夠看官方文檔。

小技巧：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均不受影響。