在这里我要给大家介绍一套基于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文件。
如下图:
二、使用方法
使用方法就是像我们的入门UI框架Bootstrap那样,通过改变类来改变UI,类的命名方法是以mui-为开头的特点,后面跟的是类型或者是属性来标识类名。还有一些是另外重构的方法,比如我们手机常见的信息弹窗。
例如:
<button type="button" onclick="func()" class="mui-btn">alert</button>
<script>
function func(){
mui.alert("晚上好","信息","确定",function(){
"dsadas"
},"div")
}
</script>
三、注意事项
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="js/mui.min.js"></script>
<link href="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(){
//点击响应逻辑
});
其实,MUI框架是不依赖于任何第三方在JS库,而且MUI以iOS平台的UI为基础补充了部分Android平台的UI控件。所以使用起来就很像是原生的UI,而没有很像网页的UI控件,很适合移动端开发。
以下是MUI框架的官方详细参考文档: http://dev.dcloud.net.cn/mui/ui/