mui開發app之html5+,5+Runtime,5+sdk,native.js

說說幾個名詞

html5：目前最新的html規範，w3c聯盟制定，手機端主要由webkit實現規範，對用戶來講就是瀏覽器實現了它

html5+：html5自己是爲瀏覽器而生，不能支持大部分移動端的API，所謂「+」，則是對html5在移動端的擴展，「中國html5+產業聯盟」規範了html5+而且實現他們，html5+是對經常使用的原生API的js封裝，包括手機上的相機，陀螺儀等31個經常使用API（android和ios通用），這些是html5沒有的API

native.js：native.js技術，簡稱NJS，是一種將手機操做系統的原生對象轉義，映射爲JS對象，在JS裏編寫原生代碼的技術。上面的html5+就是他的一個實現好的子集。native.js不是js框架，是技術！

若是說Node.js把js擴展到服務器世界，那麼Native.js則把js擴展到手機App的原生世界。

5+Runtime：native.js的運行時，至關於.net對C#，JRE對於JAVA，是一個運行環境，有把Native.js映射到java，oc代碼的原生API功能，從而實現原生的調用。

對於5+Runtime和native.js的關係能夠理解成：native.js是一種語言(語法基於js)，5+runtime是這語言的運行環境！

html5+sdk：軟件開發工具包，它和android sdk，ios sdk同樣

HTML5+ 的SDK，是把5+ runtime封裝爲原生SDK，它有3個用途。

1. 使用HTML5+ SDK實現本地打包。
2. 經過原生代碼擴展HTML5+ runtime的功能。
3. 在現有原生項目中使用HTML5+ SDK替換原有的webview，以得到更強的web加強表現。

而後：當咱們使用dcloud的mui框架作應用開發的時候

有這麼幾種狀況！

僅僅使用html5的語法：

即瀏覽器級的html5+js+css，不須要打包成app，可使用mui框架裏的css樣式和部分js，與開發傳統的wap手機頁面相同，類似的其餘框架有諸如：jquery mobile，amazeui等等。

這樣開發只適合製做微信公衆號，手機網頁等等，而且只能在瀏覽器中使用應用，不過相比於html4已經強大很多。

須要在mui.init()以後才能使用mui這個對象，調用其中部分的js方法，爲何說部分是由於。。。請往下看！

使用html5+提供的plus對象

mui中有個plus對象，他不是簡單的使用html5的功能，而是提供了一個叫html5+的API集，而且將他們封裝在了這個plus對象中，裏面有陀螺儀，map，定位，相機，文件流等等的原生功能調用接口！

plus這裏面的對象就必須在mui.plusReady()之中使用，，而上面說瀏覽器級別的只能使用mui部分的js對象和方法就是這個緣由！若是不是用html5+，你並不須要使用plusReady方法，只須要在用mui以前mui.init()一下就能夠，這也是常常有人問的mui.init()和plusReady()的區別。

mui.plusReady()是爲「html5+」而生的，最終經過「html5+sdk」打包成了app級別才能使用，由於這plus對象裏面的東西最終會被映射成爲java（android sdk），objective-c（ios sdk）的代碼，這也是native.js的技術咯！

說太多也很差理解，這些底層的實現都已經由dcloud團隊領導的「中國html5+產業聯盟」（社區）實現了，咱們只要知道咱們寫的plus對象的js代碼都會被轉化爲原生代碼，app就能實現不少原生功能的調用。

注意：plus這些東西在瀏覽器級別是不支持的，因此不能夠在普通瀏覽器中調用這個plusReady，以及plus.xxx.xxx方法等，瀏覽器用mui框架只是一部分可用的而已（剛剛說過了，再囉嗦一下）！

要使用html5+就要求咱們打包成app（使用html5+sdk），有5+Runtime，這樣便可運行plus對象下的對象和方法，這個打包能夠由hbuilder實現。（稱之爲：調試基座，html5+的功能要在調試基座中實現，即5+runtime）

這些都是app級別的了

html5+規範也不夠用了

徹底有這種可能，畢竟html5+是規範性的，不能什麼原生API都往裏面塞對吧，他實現的是基本的，經常使用的一些原生API調用，好比相機，定位，陀螺儀，文件流等等等。。。
（有31個，詳細請看：http://www.html5plus.org/doc/h5p.html）

其實真正的原生語法有幾十萬個，提供API數不勝數，不可能一一調出來，html5+把幾個經常使用的被規範化提出來而已。

要使用其餘的原生語法並映射成爲js就要用到比html5+更厲害的native.js了

native.js是對html5+的擴展（超集），是映射到原生代碼的原理，交給原生代碼去實現原生開發的功能，能夠簡單說成是把js代碼轉化爲java代碼了，固然java也不過是JVM虛擬機上跑的，最終還被轉換了二進制，計算機編程實現就是這樣一層一層往下丟的啦！

注意：native.js不是一個js框架，和node.js命名同樣，是一種技術實現，專門把js映射成底層代碼，或者說是js在app開發上的一種實現！就像node把js帶入了服務器和系統領域同樣的道理。

使用native.js須要對原生語法，api十分的瞭解，你至少要學過android或者ios開發，不然你只能copy別人代碼也不知道爲何這麼寫！

下面舉個例子，就懂了爲何你不懂原生就不能搞native.js：

function plusReady(){
    // 導入Native.js須要的原生對象
    Activity = plus.android.runtimeMainActivity();
    BitmapFactory = plus.android.importClass("android.graphics.BitmapFactory");
    StringBuffer = plus.android.importClass("java.lang.StringBuffer")
    Byte = plus.android.importClass("java.lang.Byte");
    CompressFormat = plus.android.importClass("android.graphics.Bitmap.CompressFormat");
    bBitmap = plus.android.importClass("android.graphics.Bitmap");
    ByteArrayOutputStream = plus.android.importClass("java.io.ByteArrayOutputStream");
    Base64 = plus.android.importClass("android.util.Base64");
    //viewClass = plus.android.importClass("android.view.View");

    document.getElementById("btGetCapture").disabled="";
}

看到沒這是一個html5+沒有的截屏功能，是經過native.js擴展實現的

裏面出現了大量的importClass，寫過java就明白了，這不是java在導入包嗎？？

是的，native.js就是實現了js導入java包，而且最終使用java的代碼來實現功能

總之

1. native.js使得開發html5 app更加接近原生，由於他能夠用原生同樣的語法調用原生的對象（映射）
2. 要懂原生開發才能自由定義或者使用已有的API功能實現
3. 我的建議是能不用native.js則不用，多用已經實現的html5+（其實這些也是native.js實現了，不過被封裝好了不用本身去import什麼的）

參考別人作好的native.js對原生功能調用：http://ask.dcloud.net.cn/article/114

關於其它的hybrid框架開發app：http://www.360doc.com/content/15/0423/18/21412_465487870.shtml