HBuilder开发App教程01-推开前端开发App的大门

原创 2015年07月01日 22:02:48

1.png

奇妙的前端,奇妙的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

 

 

评论

  • 相关推荐
  • 新闻
  • 娱乐
  • 体育
  • 财经
  • 汽车
  • 科技
  • 房产
  • 军事