HBuilder 入门(2)

接下来我们来看看HBuilder的安装和使用。HBuilder是基于Eclipse开发的，所以你的机器里需要有java运行的环境。

对于非java的开发者来说，需要安装一下JDK，下载地址

 

HBuilder的下载地址：HBuilder主页，点击那个“DownLoad”就可以了。

 

以上都没有什么特殊的，下载完毕以后，启动HBuilder。它会要求你注册一个用户，然后才可以使用。

第一次使用必须注册用户，登录才可以，这是它的硬性要求。按照官方的说法，HBuilder不单单希望只是一个工具，而是把工具和社区联系起来，所以才要求用户注册。

 

此举有利有弊，大家请自我根据实际情况来衡量。

 

假设一切顺利，启动HBuilder后，大家会看到如下的界面：

 

关于这个工具怎么使用，请参看官方的帮助文档，写得非常详细。

 

默认会有一个HelloBuilder的工程。里面有一个lesson1.txt文档。里面有所有的操作方法说明。

把下面所有的命令都联系一遍，基本就掌握了这个工具的使用方法。如下：

 

 当然，如果你比较懒惰，大略看一遍也行。毕竟在实践中掌握的话效果会更好一些。

 

接下来，我们开始激动人心的第一步：建立一个移动APP应用。

 

如下，点击“新建移动APP”：

 

 接下来就会弹出一个选择模板的对话框：

 

 

这里一定要注意：默认的模板选项是“空模板”。不包含任何的HBuilder提供的画面组件 -- 这其实没有意义的。

 

所以，这里一定要选择“mui项目”。它包含了 mui (默认提供的画面组件，也就是CSS 和 Javascript)。

mui 的帮助参考官方的帮助文档。

 

建立的工程类似如下：

 

其中index.html 是入口文件。 css 是样式表目录，fonts 是字体目录， js 是 javascript目录，这三个目录是 mui 自带的。

manifest.json 是配置文件，也就是你的APP的配置文件，例如入口文件的指定，图标的指定。它的使用，可以参考官方文档，非常详细。

 

具体的设置以后再说，我们要马上在手机上启动我们的APP！

 

HBuilder有强大的联机调试功能。我只用过 android 来调试，当然 iphone 也可以。

把你的手机和电脑连接上，然后点击这个图标：

 

如果连接顺利，那么上面会显示手机的名称。然后再点击绿色的运行图标就可以了。接下来你就可以看到手机上运行了你的APP。当然，因为什么也没有，画面是一片空白。

 

HBuilder 的联机功能很强大，但是连接手机时，也难免会出现各种问题。我用过三星的手机，经常出现连着连着就莫名其妙地断开的情况。当然，这和很多因素有关：你的系统配置，安装的软件，手机的设置等等。

所以，初期的联机调试大家或许会遇到许多问题，不要气馁，多尝试几次，总会搞定的。

官方也提供了详细的帮助文档，参照帮助文档，一定可以解决这些问题的。

 

到此为止，我们已经可以在手机上运行APP了，走出了第一步。

接下来的文章，就要分享一下最重要的概念：WebView了。