最近项目中需要使用 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 均不受影响。