MUI在web APP开发中的应用与研究

汪佳佳

江西农业大学



MUI在web APP开发中的应用与研究

汪佳佳

江西农业大学

本文介绍了目前比较流行的Web APP前端开发框架MUI，研究了webAPP 前端开发中采用MUI框架的意义，以及MUI框架自身所基于的理念和在实际中的应用。希望通过这篇文章告诉广大的web开发人员，采用MUI框架开发webAPP对项目开发所提供的便捷。

MUI web APP javascript

1　引言

随着移动互联网的飞速发展，移动应用设备也日渐繁多，对于移动端APP项目的开发要求也随之变高，WebAPP项目日渐成为主流APP开发方式，这种多元话的开发方式使得Web前端人员不可或缺。web开发人员每天都写着重复的HTML和交互效果，如果将这些适用于webAPP的前端样式，效果等都整合在一起，这会极大的简化web开发工作，而MUI就是适用于web app的框架。

2　webAPP前端框架

webAPP开发框架顾名思义就是webApp项目前端部分框架，其中包括html+css框架+javascript 库，css框架是一系列基本元素样式的集合，其中包括元素样式重置，页面排版布局、网格布局、标题样式、表单样式、导航等通用规则样式。Javascript库就将常见的web APP项目上的各种效果体验，数据交互集成在一个js文件中。其目的就是简化开发过程，提高了工作效率。

3　MUI框架

MUI是一款可用开发高性能App的框架，也是目前最接近原生App效果的框架，可以有效解决HTML5原生开发中遇到的部分问题。目前MUI已经开源，采用MIT协议。它的官方网址为“http：//dev.dcloud.net.cn/mui/”它的开源地址为“ttps：// github.com/dcloudio/mui/”。

3.1.1MUi框架的特点

在前端领域中，移动应用开发者放弃采用HTML5，其中的主要原因还是性能和体验方面还存在问题。HTML5开发者面临诸如浏览器切页白屏、转页动画较差、浮动元素抖动、无法流畅下拉刷新等问题，在Android低端机运行更是表现不足。系统浏览器的兼容性不同导致制作一个漂亮的控件变得非常麻烦。

3.1.2MUI框架的功能

（1）css组件。MUI内置了一套很灵活实用的css组件，可用于设计用户首页和交互等功能。这些组件包含的功能主要有侧滑菜单、图片轮播、选择器、进度条、滑块、输入表单等常见的手机端展示效果。

（2）MUI基本布局。MUI提供了很多常用的布局样式，如输入表单，选择器，弹出框，按钮，图片，按钮，图标等。用户只需要简单的书写一个预定义的class或者id就可以获得相应的效果，而不用再去书写复杂的css样式了。

（3）内置javascript。MUI提供了很多交互效果，如侧滑菜单，选择器，轮播组件，遮罩蒙版，上拉加载，下拉刷新和AJAX。这些常见的web效果，只需要与内置的css文件相互搭配，就能够极大的丰富用户体验，何乐而不为呢？

（4）窗口管理。MUI提供的窗口管理通过预加载的方式，解决了页面切换白屏的问题，通过封装的原声动画解决了SPA模式的动画卡顿。

3.1.3MUI框架的优点

首先是轻量，MUI框架文件仅有108K，像当下比较流行的BootStrap框架则有297K.MUI虽然文件小，但是它提供了超过20多个控件、50多个JS API和100多种样式；其次是快，MUI的JS加载速度仅有17毫秒，体量小、加载快，页面绘出速度快，这也致力于它的轻量的特点。最后是易，内置于HTML5开发工具HBuilder，具有代码块提示功能，可边看边改，官方文档是纯中文，零基础。

3.1.4MUI框架的应用

搭建项目开发环境HBuilder，在Hbuilder中，新建HTML文件，选择“含mui的HTML”模板，可以快速生成mui页面模板，该模板默认处理了mui的js、css资源引用。在其他的开发环境下，也可以在gitHub上下载源代码，引入到本地的文件中。

顶部标题栏是每个页面都必需的内容，在Hbuilder中输入mheader，可以快速生成顶部导航栏，然后.输入mbody。除顶部导航、底部选项卡两个控件之外，其它控件都放在.mui-content控件内，在Hbuilder中输入mbody，可快速生成包含.mui-content的代码块，这样整个页面结构就已经完整了。

应用css组件和javascript，比如要实现图片轮播，只要给父元素增加mui-slider类，子元素使用mui-slider-grop，图片元素都添加一个mui-slider-item类就可以实现。对于图片轮播，MUI框架提供了两种效果，分别是支持循环和不支持循环，为项目开发中的多样性提供了扩展的空间。

内置css样式，对于上述实例，若需要添加轮播为滚动效果只需要在mui-slider-group类上再添加一个mui-sliderloop即可。

内置Javascript。mui框架内置了图片轮播插件，通过该插件封装的JS API，用户可以设定是否自动轮播及轮播周期，添加一行js代码就可以实现图片轮播效果，真的非常方便，页面的兼容性，对于多样的设备都能够很好地兼容。

4　结束语

显而易见，MUI是一个非常受欢迎的web APP前端开发框架，用于移动设备优先的web项目。目前，有很多大型公司也都开始用MUI框架，因为他的轻量，快速，简单，使得很多web开发人员写代码可以乐此不疲。

［1］ 黑尔斯 （Wesley Hales） .HTML5和JavaScript Web应用开发.北京：上海邮电出版社，2013年11月1日

［2］ 杰瑞 （Juriy Bura） ， 科茨 （Paul Coates）.Android Web Game App高级编程.北京：清华大学出版社，2014年3月1日［3］ http：//dev.dcloud.net.cn/mui/ui/、

汪佳佳 1993年2月5日。女，汉，江苏江阴。学历：硕士在读。单位：江西农业大学。研究方向：计算机技术。