前些日子,Android原生開發(fā)將被取締的吵得火熱,JavaScript是能做一個完全的APP,但只使用JavaScript做出來的APP也不會牛逼到哪里去。最好的是混合(Hybrid)開發(fā),在需要的時候使用JavaScript,各有好處。
原生頁面
優(yōu)勢:
(1)運行速度比較快
(2)能使用設(shè)備的底層功能,如攝像頭、方向傳感器、重力傳感器、撥號、GPS、語音、短信、藍牙等
(3)在界面設(shè)計、功能模塊、操作邏輯等層面相較web更易做到App的便捷性和舒適性,功能更加強大
(4)節(jié)省流量
劣勢:
(1)不同的操作系統(tǒng)(如Android和iOS)需要獨立的進行開發(fā),使用其各自的開發(fā)包、開發(fā)工具和控件
(2)每次有更新,都需要重新打包一次發(fā)布到應(yīng)用平臺上,且每次要向各個應(yīng)用商店進行提交審核。之后用戶需要手動進行點擊更新安裝(安裝成本較高)
(3)開發(fā)成本比較高,尤其需要適配各種機型時(如Android應(yīng)用,需要適配各種Android手機)
H5頁面
優(yōu)勢:
(1)由于是運行在瀏覽器上,所以只需要開發(fā)一次便可以在不同的操作系統(tǒng)上顯示
(2)迭代版本時,不需要打包便可以發(fā)布(實時更新、快速迭代),與云端實現(xiàn)實時數(shù)據(jù)交互
(3)開發(fā)成本相對較低,對瀏覽器的適配較簡單,且發(fā)布門檻相對較低
劣勢:
(1)每次打開頁面,都得重新加載,獲取數(shù)據(jù)...
(2)過于依賴網(wǎng)絡(luò),速度無法保證。特別在弱網(wǎng)環(huán)境下,不僅耗費流量而且加載緩慢,就算是WiFi情況下也不容樂觀
(3)只能使用有限的設(shè)備底層功能(無法使用攝像頭、方向傳感器、重力傳感器、撥號、GPS、語音、短信、藍牙等功能)
(4)仍處于發(fā)展階段,部分功能無法在基于現(xiàn)有技術(shù)的瀏覽器基礎(chǔ)上實現(xiàn),且無法全面的顯示最完美的用戶體驗,只能用現(xiàn)有技術(shù)去彌去找最佳解決方案
分析淘寶中的原生頁面和H5頁面



由上圖得知,是否有底部tab導(dǎo)航欄也無法區(qū)別出H5頁面
如下圖是一個原生與webview混排的界面,紅色線框是各控件的繪制邊界,中間那一大塊布局豐富的界面沒有顯示出很多邊界紅色,就是H5實現(xiàn)的。

案例:
JS調(diào)用Java,將Java中的Json數(shù)據(jù)顯示在H5界面,點擊調(diào)起視頻播放器

初始化webView: webview = (WebView) findViewById(R.id.webview);
設(shè)置WebSettings:


javaScript接口的內(nèi)部類設(shè)置如下:

(若沒有效果,請將build.gradle 中的targetSdkVersion改為低于19) 因為android4.4以后瀏覽器內(nèi)核改了,而webView還是使用原來的webkit內(nèi)核