HBuilder開發App教程01-推開前端開發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

更多教程：

HBuilder開發App教程：http://uikoo9.com/book/detail/3

更多學習筆記：http://uikoo9.com/book

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

HBuilder開發App教程01-推開前端開發App的大門