1 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)