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

HBuilder 入门(1)

2015-11-10 10:32 来源:www.lanrenmaku.com / 作者:懒人 已被阅读:次 分类:移动web开发 上一篇:HBuilder 入门(2) 下一篇:Web APP开发技巧总结

我也是一名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元素。非常不错,大家可以参考使用。

总结一下,HBuilder实现了HTML5+的标准,并且提供了一个浏览器运行的内核程序,让你的HTML5+应用可以运行在其中。此外,它还是一个不错的开发工具,有很强的代码提示,联机调试等功能。

 

不过也有一些需要注意的地方,例如HBuilder在第一次使用的时候,需要注册用户,登录才可以。对于一些安全级别要求高的公司来说,这恐怕是一个问题---虽然HBuilder承诺不会有数据泄露的风险。

还有就是目前HBuilder还不是一个稳定的版本,随时会升级,并且可能会有一些问题。

总之,请根据自己的实际情况来判断风险。

 

多说不如多做,如果觉得这东西挺有意思,不如马上下载一个,体验一下。

HBuilder自带了很多例子,几乎是文档上所有内容的例子,和手机联调一下,一运行就能看到效果,立刻就会看到它的与众不同之处。

 

它的问答栏目也不错:http://ask.dcloud.net.cn/explore/,问之前可以看看是否已经有答案了(80%的情况是别人都问过了)

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