說說幾個名詞
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個用途。
- 使用HTML5+ SDK實現本地打包。
- 通過原生代碼擴展HTML5+ runtime的功能。
- 在現有原生項目中使用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的代碼來實現功能
總之
- native.js使得開發html5 app更加接近原生,因為他可以用原生一樣的語法調用原生的對象(映射)
- 要懂原生開發才能自由定義或者使用已有的API功能實現
- 個人建議是能不用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