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.客户列表控件(支持多条件查询)

你可能感兴趣的:(HTML5移动前端开发)