HBuilder开发App教程
奇妙的前端，奇妙的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中的原生方法，
大概原理如下：
- qiao.ng.toast = function(msg){
- // for ios
- if(window.WebViewJavascriptBridge){
- WebViewJavascriptBridge.sendMessage('showSystemToast$' + msg);
- }else{
- document.addEventListener('WebViewJavascriptBridgeReady',function onBridgeReady(){
- WebViewJavascriptBridge.sendMessage('showSystemToast$' + msg);
- }, false);
- }
- // for android
- if(typeof android != 'undefined'){
- android.showSystemToast(msg);
- }
- };
也就是封装了js调用android和ios的方法，
据HBuilder官网说法是封装了40w+的原生方法，
总结一下，就是js去调用android或iso中的原生方法。
点这里去下载官方nativejs-app：http://www.dcloud.io/helloh5/
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://dcloudio.github.io/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