Hbuilder开发移动App（1）

奇妙的前端，奇妙的js

众所周知，自从js有nodejs后，前端人员能够华丽的转身，去开发高并发非阻塞的服务端程序，

随着html5的出现，伴随一些amazing的特性，h5开发app的技术愈加的成熟，

自从2008年国外推出phonegap后，前端人员又踏上开发app的路程，

今年来国内也对应推出了一些可让前端人员开发app的ide，

不过大部分是收费的，强定制的，这里就不一一列举了。

这里推荐DCloud推出的HBuilder，一句话谁用谁知道。

 

一次开发两种app

经过HBuilder的云端打包技术（也能够放到本地），

你只须要写html+js+css便可开发出app，

而且是一次开发，便可生成android和ios两种对应app。

 

原理介绍-ui层

app中的ui对应html中的ui，你能够自行选择ui框架，

不管是bootstrap仍是amazeui，仍是jquery mobi（phonegap推荐ui），

仍是HBuilder推荐的mui均可以，

这里建议使用HBuilder推荐的mui，

由于封装了一部分nativejs的东西，

并且HBuilder也封装了mui的快捷键，使用起来很方便。

总结一下，就是用html层次的ui框架来实现（模拟）app中的ui。

点这里下载官方mui-app：http://www.dcloud.io/hellomui/

 

原理介绍-nativejs

HBuilder开发app，不可避免的是调用android和ios中的原生方法，

Native.js技术，简称NJS，是一种将手机操做系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。

若是说Node.js把js扩展到服务器世界，那么Native.js则把js扩展到手机App的原生世界。

HTML/JS/Css所有语法只有7万多，而原生语法有几十万，Native.js大幅提高了HTML5的能力。

NJS突破了浏览器的功能限制，也再也不须要像Hybrid那样由原生语言开发插件才能补足浏览器欠缺的功能。

NJS编写的代码，最终须要在HBuilder里打包发行为App安装包，或者在支持Native.js技术的浏览器里运行。目前Native.js技术不能在普通手机浏览器里直接运行。

• NJS大幅扩展了HTML5的能力范围，本来只有原生或Hybrid App的原生插件才能实现的功能现在可使用JS实现。
• NJS大幅提高了App开发效率，将iOS、Android、Web的3个工程师组队才能完成的App，变为1个web工程师就搞定。
• NJS再也不须要配置原生开发和编译环境，调试、打包均在HBuilder里进行。没有mac和xcode同样能够开发iOS应用。
• 若是不熟悉原生API也不要紧，DCloud官网汇总了不少NJS的代码示例，复制粘贴就能够用。http://ask.dcloud.net.cn/article/114

再次强调，Native.js不是一个js库，不须要下载引入到页面的script中，也不像nodejs那样有单独的运行环境，Native.js的运行环境是集成在5+runtime里的，使用HBuilder打包的app或流应用均可以直接使用Native.js。

总结一下，就是js去调用android或iso中的原生方法。

点这里去下载官方nativejs-app：http://www.dcloud.io/helloh5/

关于Native.js的文档能够参见：http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/88

DCloud，HBuilder，mui，nativejs，html5+的关系

DCloud

DCloud是一家公司

hbuilder

DCloud推出的能够开发app的前端IDE，是基于eclipse二次开发而来，

因此熟悉eclipse或者myeclipse的开发人员能够很快的上手。

相似IDE，有phonegap等等。

mui

DCloud推出的模拟原生app的ui框架，

相似框架有：bootstrap，amazeui，jquery mobi， framework7等

nativejs

广义上的nativejs是指能够调用android，ios原生方法的js，

这里专指DCloud推出的nativejs，官方称封装40w方法。

html5+

听说是w3c旗下的组织，目标是推出适合开发app的增强版html5，

相关参与的机构有不少，可是感受主力仍是DCloud

相关连接：

1.html5+：http://www.html5plus.org/

2.hbuilder：http://www.dcloud.io/

3.mui：http://dev.dcloud.net.cn/mui/

4.nativejs：http://www.dcloud.io/docs/api/

5.bootstrap（国内）：http://v3.bootcss.com/

6.amazeui：http://amazeui.org/

7.jquery mobi：http://jquerymobile.com/

8.framework7（类ios）：https://github.com/nolimits4web/Framework7

9.material-ui（android）：https://github.com/callemall/material-ui