Hbuilder開發移動App（1）

本文轉載自查看原文 2017-04-16 09:23 7249 HBuilder/ 移動App/ Native.js/ Hbuilder

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