近来项目中须要运用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均不受影响。
