MUI简介-最接近原生App体验的前端框架
一、总结
一句话总结：最接近原生App体验的前端框架
二、多端发布 – 开发一套代码，发布六个平台
- 真正彻底的跨平台开发，不是简单的跨iOS和Android。
- 基于mui，一套HTML5工程，通过前端构建工具（如grunt）条件编译，可同时发行到iOS Appstore、安卓各大应用商店、普通手机浏览器、微信App和流应用。
- 并且在每个平台上，都能调用该平台的专有API达到原生体验。
三、MUI介绍
1.1 MUI是什么，解决了什么问题。
（1）性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败，尤其拿到Android低端机运行，摔手机的心都有（如果开发者需要解决这些问题，需要处理很多兼容性问题，需要花费大把的时间和精力）；
（2）浏览器默认控件样式（prompt、alert）又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。
（3）mui框架解决的问题：一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。有些控件就是原生态的效果，mui起到了桥梁的作用。
了解：
MUI是国产的，北京数字天堂。。。和它配套的有开发工具HBuilder，5+runtime
5+runtime：可以将H5打包成native app，原理：利用原生态的webview去承载HTML5。 
1.2 MUI的特点
（1）轻量
追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征；
MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K
可以根据自个的需要，自定义去下载对应的模块。和我们接触的zepto.js类似。
（2）原声UI
鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标
MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件;
容易上手 ;
不需要其他框架基础：语法上和我们之前 学到用到 的写法是一样的。
其他框架：ionic(Angular.js), react(native),vue(发音:view）
vue、react、Angular.js是并列关系。
前端是：vue和react的天下
1.3 MUI存在的问题
（1）名气不是很大，国产，不像react、Angular.js那样，世界范围都在使用。目前国内MUI使用的公司还是很多的。
（2）框架本身存在一些bug还有一些待解决的问题。(tap == click)
1.4分析MUI结构
dist:distribution的缩写，存放目标，发布的文件，对于一些框架来说，使用者将里面的文件copy出来直接用就OK
examples：存储案例（demo）的文件
grunt：存储js模块化相关的文件，类似sass里面引用sass，这里是js里面引用js。和grunt类似的工具用gulp，webpack。
plugin：存储该框架的插件（扩展） 
2 UI组件
2.1 accordion（折叠面板）
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
</ul>可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，使用的就是折叠面板控件。
2.2 actionsheet（操作表）
2.3 dialog（对话框）
（1）警告框：
$.alert('警告的内容\n可以使用\n换行', '警告标题',"按钮的文字" ,function() {
//点击确认的回调
});
注：.alert( message, title, btnValue, callback ) message必须是字符串
（2）确认框
var btnArray = [‘否’, ‘是’];
$.confirm('是否确认删除', '确认的标题', btnArray, function(e) {
//通过e.index可以知道用户点击了哪个按钮
if (e.index == 1) {
$(this)[0].innerHTML = "ok";
} else {
$(this)[0].innerHTML = "no"
}
})注：显示什么按钮是一个数组，当这个数组只有一个元素的时候，类似于警告框
（3）输入框
.prompt( message, placeholder, title, btnValue, callback )
var btnArray = ['取消', '确定'];
$.prompt('请输入评语：', '性能好', 'Hello MUI', btnArray, function(e) {
if (e.index == 1) {
$(this)[0].innerHTML = '谢谢你的评语：' + e.value;
} else {
$(this)[0].innerHTML = '你点了取消按钮';
}
})
（4）toast提示框
$.toast('欢迎体验Hello MUI');2.4 list（列表）
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell"> Item 2
<span class="mui-badge mui-badge-primary">11</span>
</li>
<li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 3</a></li>
</ul>2.5 ipnut (表单)
（1）密码输入框，后面有一个小眼睛
（2）输入框后面可以设置一个 清除的按钮
2.6 number box(数字输入框)
<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button></div>注：
（1）我们可以设置输入框的最大值、最小值、设置修改的步长
（2）可以获取到输入框的值。Mui有方法提供
（3）我们可以通过js设置输入框的值。Mui有方法提供
（4）我们可以通过js设置输入框修改的步长，Mui有方法提供
了解：组件化开发。在前端，还是后端（Java）都在提倡。
定义：在解耦复杂系统时，多个功能模块进行拆解、重组的过程，有多种的属
性、状态反映其内部的特性
目的：对复杂系统拆分成多个组件，方便对其独立升级和优化。
2.7 ipnut (表单)
2.8 picker（选择器）
2.9 switch(开关)
<div class="mui-switch mui-active" id="mySwitch">
<div class="mui-switch-handle"></div>
</div>注：
（1）根据div中是否包含mui-active 来判断当前开关的状态。
（2）我们可以通过js去设置开关的状态，mui提供方法
（3）我们可以监听到开关改变的状态，mui提供方法
2.10 slide（轮播组件）
2.11 图片轮播
2.12遮罩蒙版
对框架进行原生态代码的转化
mui("#close")[0].style.display = "block";在转回框架
mui(mui("#close")[0]);自学:
（1）侧滑导航
（2）radio（单选框）
（3）badge（数字角标）
（4）checkbox（复选框）
（5）弹出菜单
案例：
3 Utils
3.1 init
mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。
3.2 mui()
这里mui和我们之前接触的jQuery的是一样的。可以将mui和
理解成一个函数。mui()、$()理解为函数调用。
mui(“#XX”),mui(“.XX”)
(function ($,document) {
$('#sheet1').popover('toggle');
})(mui,document)上面这种写法的好处：
（1）执行速度更快
（2）更方便代码压缩
mui或者jQuery对象转成dom元素
$(“sle”)[0]\mui(“sle”)[0]原生态转成mui或者jQuery对象
$(“sle”)、mui(“sle”)、$($(“sle”)[0])、mui(mui(“sle”)[0])3.3 each()
3.4 extend()
3.5 scrollTo()
3.6 os
自个了解：navigator.userAgent
通过这个，你可以间接地获取，当前设配信息
比如：手机类型（Andriod、iOS）、浏览器类型（WeChat浏览器、QQ浏览器、还是其他浏览器）
(function ($,document) {
var isAndriod = $.os.android;
if(isAndriod){
$.alert("您用的是安卓手机")
}else {
$.alert("您用的是街机")
}
var isWechat = mui.os.wechat;
if(isWechat){
$.alert("微信浏览器");
}else{
$.alert("非微信浏览器");
}
var isAndroid = $.os.android;
var iOS = $.os.ios;
if(!isAndroid && !iOS){
$.alert("winPhone");
}
})(mui,document)通过mui提供的方法，可以获取到
（1）系统的版本（iOS、Andriod）
（2）系统的版本
（3）浏览器的类型（WeChat、QQ）
4窗口管理
4.1 页面初始化
4.2 打开新页面
4.3 关闭页面
5事件
5.1 事件绑定
(function ($,document) {
$("body").on("click","#btnClick",f1);
function f1() {
$.alert("点击了！");
};
$("body").on("click","#cancel",function () {
$("body").off();
});
})(mui,document)注：写取消事件时，将书写 绑定事件的代码复制过来，将on改成off即可。
当然，off()事件可以不带参数。
了解：面向对象的3大特性：（封装、继承、多态）
5.2 事件取消
5.3 事件触发
使用mui.trigger()方法可以动态触发特定DOM元素上的事件。
注：第一个参数是DOM原生态元素。
4.4 手势事件
6 Aajx
7下拉刷新
加载第一页最新的数据，如果服务器数据没有变更，那么和上次获取的到的数据是一样的。
将获取到的第一页数据放置到页面之前，先清除原有的数据。
8上拉加载
加载下一页数据，同时放到原有数据的最后端。
根据返回数据的条数 和pagesize进行判断，确实是否还有下一页。
将当前页码存为一个全局变量page。
当有下拉刷新的时候，page值需要重置
