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