srcmini在这里我要给大家介绍一套基于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/
评论前必须登录！
注册