移动端web app开发框架MUI的使用及注意事项 _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文件。
如下图：

文章图片
二、使用方法使用方法就是像我们的入门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="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/