个性化阅读
专注于IT技术分析

移动端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文件。

如下图:

html5APP新建项目

二、使用方法

使用方法就是像我们的入门UI框架Bootstrap那样,通过改变类来改变UI,类的命名方法是以mui-为开头的特点,后面跟的是类型或者是属性来标识类名。还有一些是另外重构的方法,比如我们手机常见的信息弹窗。

例如:

<button type="button" onclick="func()" class="mui-btn">alert</button>
<script>
function func(){
mui.alert("晚上好","信息","确定",function(){
"dsadas"
},"div")
}
</script>
mui-alert实例

三、注意事项

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/

赞(0) 打赏
未经允许不得转载:srcmini » 移动端web app开发框架MUI的使用及注意事项
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏