MUI框架使用指南

MPAS混合模式前端框架分析：
一、MUI 框架（前端UI框架）
（一）MUI框架介绍与优劣势分析：
1.MUI基本介绍
MUI是一套前端框架，由DCLOUD公司研发而成，提供大量H5和js语言组成的组件，大大提高了开发效率，可以用于开发web端应用、web APP、混合开发等应用。利用MUI框架，用户在使用APP时可以得到接近原生APP的操作体验。

2.优缺点分析
优势：
目前的APP开发中，大部分还停留在webapp开发中，相当于用浏览器的方式去运行整个APP,由于浏览器天然的切页白屏，不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题，导致HTML5APP的用户体验比较差，而MUI框架在体验与性能上接近原生App效果。MUI框架以IOS7为基础，补充android特有控件，页面切换带有侧滑，下滑等效果，用户体验度高。
对比其他移动端常用框架：
JQUERY MOBILE: 性能低，样式丑。（MPAS以前用的UI框架）
AngularJS的Ionic:PC端的angularjs框架引入移动端，有些笨重。
Bootstrap: PC端的UI框架引入移动端，有些笨重。
自定义样式（MPAS现阶段做法），缺点：所有样式都靠自己命名，写结构，开发量大，吃力不讨好，即使定义了公共样式，但新功能，新页面出来，难免和以前的页面样式有所不同。

劣势:
MUI框架：以IOS7组件为原型设计的UI框架，缺点：组件风格可能和我们设计师的设计风格不符，组件样式不够多，有些东西还需要自己单独的再写。

（二）基本结构与使用：
1.MUI的使用方式非常简便，在常规的移动端页面架构中，只需要引入MUI框架中相应的封装好的样式文件CSS和功能文件JS，既可以使用简单的MUI框架的页面样式布局和简单的逻辑操作。
2.MUI框架对样式和API进行了封装，大部分功能使用特定的标签属性ID或者便签属性的类名class进行绑定，既可以实现样式的展示和功能使用，十分的方便。

3.同时MUI框架也使用了组件化的思想，把特有的组件封装在单独的CSS和JS文件中，一方面可以减少MUI框架主体的容量大小，使MUI整体更加轻量化，另一方面也可以在不同的页面进行特定组件的使用，更大程度的减少代码的冗余，提高开发效率，大大缩短开发周期，提高项目的收益。

（三）相关API操作和注意事项：
MUI官网提供了丰富的文档说明与演示，方便开发者利用文档进行页面快速搭建和组件的使用。

注意事项：
DOM结构
1.固定栏靠前
所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容。

2.一切内容都要包裹在mui-content中
除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩，原因：固定栏基于Fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：

3.始终为button按钮添加type属性
若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。

窗口管理
1.页面初始化：必须执行mui.init方法
mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；

4.页面跳转：抛弃href跳转
当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验障碍；为解决这个问题，建议使用mui.openWindow方法打开一个新的webview，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页面；

手势操作
1.点击：忘记click
快速响应是mobile App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延迟，及300毫秒的来龙去脉，请自行谷百），mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作

（四）常用组件和插件：
MUI内置了丰富的组件和插件，方便开发者直接调用和使用，另外运行在手机端时，MUI还把原生安卓和IOS的相关API封装在mui-plus 方便开发者直接调用与设置，通过单纯的使用H5开发实现与原生APP相接近的用户体验。

1.刷新和日期控件

2.弹框控件：

3.二级联动和三级联动

4.进度条控件

5.图标展示控件

6.图库预览插件（支持多图片预览）

7.客户列表控件（支持多条件查询）