HBuilder 入门(1)

xueliangEmail

2015-05-07

关注关注

我也是一名HBuilder的初学者，在学习和使用中遇到了一些问题，走了不少弯路。所以想把这些教训总结出来，分享给其他的初学者。也希望更多的人能认识HBuilder，用它来开发更多强大的APP。

在具体了解HBuilder之前，我们先来看看HTML5在移动开发中的状况吧！

为了增加web的功能，HTML5标准早已经出现了，这个无需介绍，大家想必早就有一些了解了。而且web开发的优点也是显而易见的：

画面构造简单。即使是复杂的画面，使用div+css技术也可以很容易的实现
学习的人多，很容易找到合适的人选
开发语言简单，基本就是 html，javascript
开发完一种应用，经过少量改动，可以快速移植到不同手机系统
等等

自然而然地，就出现了在移动开发中使用web技术的方式。而web的增强版--- HTML5，无疑是最佳的选择。

但是，HTML5也并非完美的。最主要的问题是，HTML5是web开发的标准，不是app开发的标准。所以，“页面跳转的空白显示”，“无法调用原生API”等问题，成为了HTML5在移动开发中的诟病。

当然，还是有很多解决方案，如phonegap等，但是前提是你需要一些原生开发的技术，所以，这种解决方案并不完美。

那么，接下来要介绍的，就是目前来说，一个非常出色的解决方案了--虽然到目前为止，它还没有发布一个正式版本，但是使用它开发的应用已经非常非常多了。这就是HBuilder。

HBuilder是什么？
它的网站：http://dcloud.io/

如果单从上面的页面来看，它就是一个开发工具，包含了javascript以及HTML的语法，你用它写web程序的时候，它会给你自动提示或者补全。从工具的角度来说，这个东西确实不错，谁能全记住那些关键词呢？但其实，工具只是它的一小部分而已。

进入它的文档部分：http://ask.dcloud.net.cn/docs
会发现里面很多项目。下面主要说说对于初学者来说，这些文档的阅读方式。
HBuilder
进入这个项目中，会看到“入门”，“代码提示”等项目。
这个项目主要介绍的就是HBuilder这个工具怎么用。重要程度基本上和“Eclipse怎么用”差不多。
建议看一看，但是不用花太多的时间，以后的开发中，会逐渐掌握这些技巧的。
5+ App
这个项目才是重点。
什么是 "5+ App" 呢？就是HTML5虽然已经是增强版了，但是还不够强，至少在APP开发这个地方还是非常弱。那么怎么办呢？这次中国的技术强人没有落后世界，抢先出击，弄出了一个“HTML5+”规范---也就是HTML5的升级版。
当然，这些牛人也意识到了，全运会再怎么声势浩大，也就是个局部运动会，永远比不上奥运会。所以这个HTML5+规范不是自己玩玩就算的，是准备提交给W3C组织的 --- 也就是制定HTML标准的组织。请大家注意这点：目前还没有提交。成功接纳的可能性也不知道有多少。
不管怎么样，个人觉得这应该是中国在技术上的一次进步吧。

这个项目的第一条：HTML5+规范，讲的就是这个标准的详细内容。

所以，我们可以这样认为：HBuilder所在的组织（公司），制定了HTML5+规范，然后第一个实现了这个规范，这就是HBuilder的核心。

在“概述”这个项目里，详细地说明了HTML5+的优势。为什么会有这些优势？因为HBuilder使用了新的实现方式：HTML5+，它已经可以让web应用变得几乎和原生应用一样快了。

可以想象，如果HTML5+被世界范围内接受，那么这次我们真的是走在了世界的前列。

建议仔细阅读一下“HTML5+ 规范”的内容，因为这是使用HBuilder开发的基础。记不住没关系，至少知道哪个地方有这么个东西在就行。
Native.js
在5+App项目里，有一个项目是“Native.js”。这是让很多初学者感到迷惑的地方。有的人甚至在寻找Native.js这个文件在哪里。
其实Native.js不是一个javascript文件，仅仅是名字叫“Native.js”。
这个东西的目的是可以在javascript中调用android或者IOS的原生API（很强大，是不是）。其实它就是HBuilder所在组织（公司）开发的一个javascript引擎，你使用特定的语法，就可以调用原生的API。

非常强大的功能，是不是？由于原生的API非常多，所以文档上列举出了常用的一些功能。

5+App的文档内容比较多，建议全部仔细阅读几遍。
其中的真机调试，打包等内容，需要的话，也请仔细阅读。
MUI
HBuilder自带的一套UI套件，模拟了目前APP应用的按钮了，显示条目了，等等UI元素。非常不错，大家可以参考使用。