数据载入中,请稍后......
 
展开
懒人码库客户端 点击或扫描下载
欢迎来到懒人码库!懒人码库QQ群:19651313
欢迎来到懒人码库!懒人码库QQ群:19651313  
当前位置:懒人码库 > 移动web开发

HBuilder 入门(2)

2015-11-10 10:30 来源:www.lanrenmaku.com / 作者:懒人 已被阅读:次 分类:移动web开发 上一篇:HBuilder 入门(3) / 关于WebView 下一篇:HBuilder 入门(1)

接下来我们来看看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了。

标签:HTML5HBuilder
小贴士:懒人码库 为网页前端人员提供建站常用的广告代码和网页特效,内容涵盖焦点图,导航菜单,jQuery代码,图片特效,对联广告,日历控件,在线客服等。