移动端web app开发框架MUI的使用及注意事项

在这里我要给大家介绍一套基于HTML5+规范的开源前端框架——那就是MUI框架。他利用了HTML5+扩展的原生能力。解决了UI空间的性能和跨平台问题。使用MUI框架呢,可以方便而且高效的开发出高性能的app,同MUI框架也适用于普通浏览器,这样使得开发出来的app也可以作为web app,同时可以发布多个版本,兼容iOS跟Android系统,还可以发到手机浏览器上,可以说是降低了开发成本。
一、开始项目首先我们要下载一个HBuilder然后新建项目的时候选的是『h5+app』然后选的是MUI项目他就会包含了MUI的js,css跟字体资源的项目模板。
在生成的文件中,你就会看到有一个index.html文件,在head头部你就会看到有外部引入的mui框架所需要的js和css文件。
如下图:

移动端web app开发框架MUI的使用及注意事项

文章图片
二、使用方法使用方法就是像我们的入门UI框架Bootstrap那样,通过改变类来改变UI,类的命名方法是以mui-为开头的特点,后面跟的是类型或者是属性来标识类名。还有一些是另外重构的方法,比如我们手机常见的信息弹窗。
例如:
< button type="button" onclick="func()" class="mui-btn">alert< /button> < script> function func(){ mui.alert("晚上好","信息","确定",function(){ "dsadas" },"div") } < /script>

移动端web app开发框架MUI的使用及注意事项

文章图片
三、注意事项1、-bar属性元素要考前
在MUI的DOM结构中,固定栏要靠前。就是带有-bar属性的节点,都要放在前面,因为他们是fixed定位的元素。比如说顶部导航栏,底部导航栏。一切正文内容都要放在.mui-content中,否则固定栏会遮住部分组内容。因为.mui-content已经具有padding-top: 44px的属性,只要放在.mui-content种才不会被遮挡住。
.mui-content { padding-bottom: 44px; }

2、为button设置type属性
在使用MUI的button按钮控件时候,要设置type的属性,否则如果按钮在from表单中,就会默认是type=submit。为了避免不必要的麻烦,还是做好规范习惯。
3、页面初始化
你也许会发现,在生成的index.html文件的头部head中,会有一个初始化js,在使用MUI框架时,每个页面必须要初始化,init()防范会初始化很多内容,比如按键监听,收拾监听等。
< head> < meta charset="utf-8"> < meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> < title>< /title> < script src="http://www.srcmini.com/js/mui.min.js">< /script> < link href="http://www.srcmini.com/css/mui.min.css" rel="stylesheet"/> < script type="text/javascript" charset="utf-8"> mui.init(); < /script> < /head>

4、少使用click
为什么说少使用click点击事件呢?因为快速响应是移动端app实现的重中之重,当延迟超过100ms都会显得很卡顿。而浏览器中的click点击事件的延迟时在200-300ms,因为它是快速按下-离开后才执行的操作,所以MUI封装了tap事件代替click来修改这一弊端。
element.addEventListener('tap',function(){ //点击响应逻辑 });

【移动端web app开发框架MUI的使用及注意事项】其实,MUI框架是不依赖于任何第三方在JS库,而且MUI以iOS平台的UI为基础补充了部分Android平台的UI控件。所以使用起来就很像是原生的UI,而没有很像网页的UI控件,很适合移动端开发。
以下是MUI框架的官方详细参考文档: http://dev.dcloud.net.cn/mui/ui/

    推荐阅读