您的位置：首页 > 产品设计 > UI/UE

HBuilder与MUI的简单教程

2015-03-17 09:06 453 查看

关于移动App开发.

很多人都觉得html5不如原生,并且放弃html5.比较多的原因是因为性能问题.

这是对2者的比较

HTML5开发：兼容性好，成本低，开发周期短，但无法对硬件底层的功能进行调用，性能不如原生。
原生开发: 可访问手机所有功能(GPS、摄像头)，速度更快、性能高、整体用户体验不错,但由于采用一行一行手写代码的方式开发，所以它的开发周期比较长，成本高，并且原生应用没有跨平台兼容的能力。

未来的趋势

虽然html5性能不怎么样,但觉得html5+以后是趋势，why?因为以前手机很少能玩手游的，但最近几年很多手机都能玩手游了,所以以前html5开发的app运行效率虽低，但由于以后手机的性能越来越快，而且html5+开发较原生容易些,开发周期短，成本低，所以以后html5和原生，相信更多人会选择html+.要不也不会出现phonegap.

HBuilder的出现

HBuilder是DCloud（数字天堂）推出一款支持HTML5的Web与移动app开发IDE。“快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率，据说HBuilder比其他开发工具至少快5倍，再加上MUI框架虽不能说很完美，但比以前的框架更接近原生。还有最重要的是免费。所以特别适合创业者和有创意的人快速开发一款高效的app.
最近看了一些网友写的HBuilder 和mui 感觉不全，不是只写HBuilder 就是只写mui，也可能是HBuilder 刚出不久吧.所以我打算写全点，本人也是初探.也算是复习.

下载HBuilder

HBuilder http://www.dcloud.io/

界面如下

文件结构只有一个html页面,css和js文件也就是是说只要会html5+css+js就可以开发app了，不需要Android 和IOS

还有刚才写的小Demo

<!DOCTYPE html>
<html>
<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>
<scriptsrc="js/mui.min.js"></script>
<link href="css/mui.min.css"rel="stylesheet"/>
<script type="text/javascript"charset="utf-8">

</script>

</head>
<body>
<button class="mui-btnmui-btn-block">Block button</button>
<buttonclass="mui-btn mui-btn-primary mui-btn-block">Blockbutton</button>
<buttonclass="mui-btn mui-btn-positive mui-btn-block">Blockbutton</button>
<buttonclass="mui-btn mui-btn-negative mui-btn-block">Blockbutton</button>

<buttonclass="mui-btn mui-btn-block mui-btn-outlined">Blockbutton</button>
<buttonclass="mui-btn mui-btn-primary mui-btn-blockmui-btn-outlined">Block button</button>
<button class="mui-btnmui-btn-positive mui-btn-block mui-btn-outlined">Blockbutton</button>
<buttonclass="mui-btn mui-btn-negative mui-btn-blockmui-btn-outlined">Block button</button>

</body>
</html>

效果如下

另一个Demo

<!DOCTYPE html>
<html>
<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">

</script>
<style>
body{position: relative;}
.mui-btn{width:80%; margin: 0 auto; margin-top: 10px; margin-left: 10%;}
</style>
</head>
<body>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-hidden">cared
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-left" src="3.jpg">
<div class="mui-media-body">
幸福
<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-left" src="http://dcloudio.github.io/mui/assets/img/muwu.jpg">
<div class="mui-media-body">
木屋
<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-left" src="http://dcloudio.github.io/mui/assets/img/cbd.jpg">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-left" src="http://dcloudio.github.io/mui/assets/img/yuantiao.jpg">
<div class="mui-media-body">
远眺
<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
</div>
</a>
</li>
</ul>

</body>
</html>

效果如下

调式方法 手机调式方法运行——手机运行
电脑浏览器调式方法运行 ——选择自己想要调式的浏览器

打包成app 发行——App打包
界面如下

可以打包成IOS和Android 2种平台即
跨平台
HBuilder的简单操作觉得到这里就ok了.

MUI框架
https://github.com/dcloudio/mui
MUI是DCloud公司刚刚发布不久的一款前端开源框架，可以用简，快，易来形容它

简

快

易

mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可
更多信息可以查看MUI源码，上面有链接

总结
HBuilder : 开源免费，效率高，开发周期短，跨平台。
MUI : 简洁，速度快，容易掌握。

结语
由于现在是翻墙的的状态，网络不是很稳定，所以刚才网页崩溃了几次，就不再继续写了。
有喜欢研究这个框架的朋友可以加我微博http://weibo.com/jolly007一起研究。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： android ios html5+ 开源框架跨平台

相关文章推荐

新的分享

章节导航