HBuilder开发App教程02-环境搭建,HelloWorld以及真机调试 作于2015-07-03

1917726695832817358.jpg

环境搭建

前言

用HBuilder做开发,其实可以说是最简单的一种环境搭建了,甚至可以说没有环境需要搭建,

想想android开发的时候,相当痛苦,下载各种sdk,而且都需要翻墙,苦不堪言。

用HBuilder做开发,只需要基础的java环境,其余的android和ios环境统统不需要。

HBuilder可以做到这一点,是因为:

1.将打包放到的云端,免去了本地搭建环境进行打包的痛苦,

2.将调试直接设置为真机调试,免去了各种模拟器调试的痛苦。


java环境

只需要最基础的java环境,也就是cmd下可以运行java和javac即可,

具体教程请自行百度之,都会有很详细的教程,或者找个java开发给搭建。


下载安装HBuilder

请在这里下载HBuilder:http://www.dcloud.io/

下载完成后请教zip包解压缩到自定义的目录(windows),

并将该目录下的HBuilder.exe发送快捷方式到桌面。

2.png

双击该快捷方式,

第一次打开HBuilder需要注册,还请注册,几分钟搞定,

登录后即可看到HBuilder主界面:

3.png

使用过eclipse或者myeclipse的开发人员应该很熟悉这个界面吧,

对,HBuilder就是基于eclipse做的二次开发ide,

所以大部分eclipse的操作,快捷键都可以直接挪过来使用。


HelloWorld

介绍

稍微介绍下HBuilder可以做的事情:

1.前端开发

各种快捷键,各种提示,最好的一点是对所有html,css,js的各浏览器兼容性都有提示

2.web开发

脱胎自eclipse,自然做java web开发不成问题

3.app开发

这个是重头戏,编辑,在线打包,真机调试


新建项目

点击主界面的新建移动app,或者通过项目管理器界面右键新建,或者ctrl+n,a新建,

你会看到如下界面:

4.png

1.填写应用名称

类似eclipse中的项目名称

2.选择位置

3.选择模版

空模版

mui项目,自动引入mui相关文件

hello h5+项目,和官网提供的nativejs示例app相同

hello mui,和官网提供的mui示例相同

4.点击完成

这里选择hello mui模版,你也可以选择hello h5+模版,以后开发大部分选择mui项目这个模版。


文件结构

新建完成后,左侧项目管理器中会出现如下目录结构:

5.png

做前端开发的同学一定很熟悉了吧?

主要注意的是manifest.json,

很多app相关配置:app图标,启动页,权限等都在这里配置。


end

就这么简单,你已经做完一个HelloWorld了,剩下的就是看效果了。


真机调试

连接手机

请用数据线,而不是电源线连接手机,

ios需要下载一个调试插件,android可以直接调试,

绝对不需要额外的环境,不论是ios还是android,

选中项目,或者打开任意项目中的文件时,

点击菜单--运行--真机运行--在xx设备上运行,

或者直接ctrl+r直接运行,

当你修改过文件后也可以直接ctrl+r,app就会重启。


连接失败

当你遇到连接失败的时候,

android只需要随便安装一个手机助手,手机助手连接成功即可,

ios请参考说明。


run

ctrl+r

然后享受你用HBuilder做的第一个app吧。

6.jpg


滴石

官网:http://uikoo9.com/dishi

源码:https://github.com/uikoo9/dishi


http://uikoo9.com/
更多精彩内容

求打赏(长按图片即可识别)~
微信 捐助列表:http://uikoo9.com/donate/

阅读:41172

HBuilder开发App入门-滴石