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

2019-06-09 标签:webAPP开发,Mui应用 浏览数:9

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

资讯主图

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


一、webAPP开发前端框架

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


二、MUI框架

MUI是一款可用开发高性能App的框架,也是目前最接近原生App效果的框架,可以有效解决HTML5原生开发中遇到的部分问题。目前MUI已经开源,采用MIT协议。

2.1.1 MUi框架的特点

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

2.1.2 MUI框架的功能

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

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

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

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

2.1.3 MUI框架的优点

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

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

2.1.4 MUI框架的应用顶部标题栏是每个页面都必需的内容,在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代码就可以实现图片轮播效果,真的非常方便,页面的兼容性,对于多样的设备都能够很好地兼容。 


三、结束语

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


关键字: Mui应用,衡阳APP开发,webAPP开发

提供衡阳微信小程序开发,微信营销功能开发、公众号开发等开发服务