HBuilder与MUI的简单教程

关于移动App开发.

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


这是对2者的比较 

HTML5开发 :兼容性好,成本低,开发周期短,但无法对硬件底层的功能进行调用,性能不如原生。

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


未来的趋势

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


HBuilder的出现

HBuilderDCloud(数字天堂)推出一款支持HTML5Web与移动app开发IDE快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块及很多配套,HBuilder能大幅提升HTMLjscss的开发效率,据说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一起研究。



 

展开阅读全文

没有更多推荐了,返回首页