HTML5+学习历程之Hbuilder工具介绍
Posted 视觉码农
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5+学习历程之Hbuilder工具介绍相关的知识，希望对你有一定的参考价值。
做过webapp开发的朋友，或多或少听说过html5+,顾名思义就是在html5基础api上进行扩展，使其能够实现native的一些功能，例如调用摄像头拍照录像，获取通讯录信息等等，总之用它来做一个app那是绰绰有余。
当然，好马配好鞍这道理大家都懂，java开发者钟爱的eclipse，前端人员耳熟能详的dreamweaver，或者sublime等等，那么HTML5+开发必然有最适合它的ide，这便是数字天堂（DCloud）于2014年3月份发出试用的Hbuilder。它到底好不好用，小编不过多吹嘘，毕竟每个人都有自己的编程习惯，，在这里贴上Dcloud的官网，大伙自行体验！
接下来就一起来了解如何用hbuider开发webapp！
上面说了，最适合html5+的开发工具便是Hbuilder，接下来就是打开Hbuilder，并且创建一个移动项目
可供我们选择的选项却有五个之多，
第一个、空模板，当然也不是说什么东西都没有，它会生成三个空文件夹（css、img、js）和一个index.html文件，以及一个最重要的manifest.json，这就是webapp的关键之处，至于这个怎么用，后续文章会详细介绍，
第二个、mui项目，在这里介绍下何为mui，mui就像bootstrap一样，bootstrap是js的一个开源库，mui便是html5+的一个库，我们可以利用mui更方便的创建webapp架构以及native功能，今天在这里主要了解基础原理，后续文章逐步介绍！
第三个、mui登陆模板，其实就是已经帮我们写好了app的登陆页面，大家依情况使用！
第四个、hello5+，就是一个已经完成的app，其向我们展示了h5+强大的api。
第五个、htllo mui，这同上面都是一样，只是个demo，其展示了mui在项目开发中的方便快捷！
hbuilder不仅仅给我们webapp开发提供方便，针对web开发也有许多其他ide没有的方便功能，多人协作开发试图，边改边看试图，其中最受前端人员喜欢的便是书写css时候最全的代码提示以及浏览器兼容性预览，有了它才能真正做到胸有成竹！
Hbuiler在webapp开发过程中，可以实现真机联调，边改代码边预览效果，这感觉简直爽爆了。当然我们也可以选择在电脑上安装android模拟器，在这里小编向大家推荐海马玩模拟器：，其使用方便，也是webapp开发中一得力干将！
一切准备就绪，接下来就可以进行webapp开发，我们完全不用担心我们写出来的html、css、js怎样才能打包在手机上用，Hbuilder已经给我们做好了一切，我们只需要安心的用我们之前写手机页面的方式去编程，完了之后再用Hbuiler的在线打包功能，当然你也可以选择离线打包，配置过程还是有点小麻烦，小编就一直没去研究，反正在线打包也不麻烦，当然前提是电脑要有网络连接！
下一篇，小编将会给大家详细介绍webapp开发中最重要的，其类似咱们html中的div，其实更准确的说便是android开发中的webview，我们可以设置多种转场动画，设置加载等待，等等。总之一个app的开始总是源于webview的使用，webview学好了，基本上就可以写个像样的app，至于其他api，能用到的毕竟少数，!
以上是关于HTML5+学习历程之Hbuilder工具介绍的主要内容，如果未能解决你的问题，请参考以下文章