Android應(yīng)用開發(fā)之Hybrid

成都創(chuàng)新互聯(lián)成立于2013年，先為下花園等服務(wù)建站，下花園等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為下花園企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

什么是Hybrid？

從用戶的角度來看，Hybrid的app和native的app并沒有明顯的區(qū)別。他們從app store下載或安裝apk，打開app開始使用，這一切都是一樣的，而且兩者都包含各種類型的應(yīng)用，游戲、社交、電商等等。最重要的是，用戶根本不關(guān)心你是Hybrid還是native，他們只想要安裝一個自己喜歡的應(yīng)用，并開始使用。

Native與Hybrid的本質(zhì)區(qū)別是構(gòu)建方式的不同，這些不同主要體現(xiàn)在應(yīng)用框架和語言兩方面。

Android Native所使用的語言大家都知道，主要是Java，某些情況下還有C/C++。而Hybrid除了Native所要用到的語言之外，還需要要Html、javascript、css等。至于哪種類型語言用的多，要看開發(fā)者選擇混合(Hybrid)的形式和比例。既然Hybrid開發(fā)需要更多的語言方面的知識，那為什么還有那么多主流開發(fā)者和公司對之推崇呢？后面會做更詳細(xì)的介紹。

對于框架，Native使用的是標(biāo)準(zhǔn)的android sdk，Hybrid其實(shí)也是處于android sdk之上的，只不過加了一層更適合web開發(fā)的中間層?，F(xiàn)有的Hybrid框架主要有，Crosswalk, Cordova，PhoneGap等。

為什么使用Hybrid？

一般來說，如果我們開發(fā)的app要發(fā)布到各個移動平臺，并且都是采用native開發(fā)的話，那么我們就需要熟悉各個平臺sdk與語言的技術(shù)人員；如果采用Hybrid方式的話，那么使用web技術(shù)開發(fā)的頁面代碼就可以在各個平臺共用。不過要注意的是，如果native向web層提供了一些自定義的插件，就需要確保各個平臺接口定義的統(tǒng)一性，否則web代碼在不同平臺上無法正常工作。

另外，很多時候開發(fā)相同的頁面使用web技術(shù)會比native更加節(jié)省時間。

當(dāng)然，使用web技術(shù)并不總是好的。首先是性能問題，一般web技術(shù)開發(fā)的頁面總是比native開發(fā)的運(yùn)行要慢的，這是web的一塊很大的硬傷。不過隨著目前硬件和瀏覽器引擎性能的不斷優(yōu)化，在體驗(yàn)上兩者的差距會越來越小，這也是hybrid或純web能夠發(fā)展起來的重要原因之一；另一方面，在接口的全面性和能力上，web層也是沒有native層豐富的，不過這個問題可以通過打通web層和java層的接口來解決?？偟膩碚f，對于那些實(shí)時性要求較高或者過于復(fù)雜的頁面還是需要采用native來寫。

Hybrid有哪些方式？

Hybrid的開發(fā)方式大概有兩種大類型，不使用框架和使用框架；而使用框架又可以分為native混合和web混合。

不使用框架是指開發(fā)者直接面對標(biāo)準(zhǔn)的android native接口自己來實(shí)現(xiàn)web頁面，一般情況下主要是利用webview及其相關(guān)接口，某些情況下還會使用第三方框架提供的嵌入式類webview模塊，比如Crosswalk框架的XWalkView。這種的方式的優(yōu)勢是靈活性較大，開發(fā)者可以任意組織自己的h6代碼和native代碼。比較適合對native比較熟悉，能夠掌控上下層各種細(xì)節(jié)的開發(fā)者。

native混合是指，使用的框架讓開發(fā)者主要面對native相關(guān)開發(fā)，而把web作為附屬。這種方式和不適用框架有些類似，只不過其中的web采用了框架而已。適合對native比較熟悉，但又想借助web框架的高效性的開發(fā)者。

web混合是指，使用的框架讓開發(fā)者主要面對web相關(guān)開發(fā)，而把native作為web的插件來提供。這種適合對web更加熟悉，并且主要頁面都采用web開發(fā)的情況。通知這種方式也是未來的主流方式。

目前很多hybrid框架，比如crosswalk，cordova等都提供了native混合和web混合兩種開發(fā)模式，開發(fā)者可根據(jù)自身及公司情況來選擇。

不使用第三方框架

這種方式同時需要android native開發(fā)技術(shù)與web開發(fā)技術(shù)。本文不對native或者web作更多的深入討論，而是將焦點(diǎn)集中在兩者結(jié)合的部分。

首先，使用native方式定義一個activity或者fragment，其中的布局文件包含WebView。該webview就是顯示我們的web頁面的核心控件。下面是一個demo的布局文件：

然后，在activity或者fragment獲取WebView實(shí)例并初始化。這里的初始化涉及到，web view的各項(xiàng)能力，開發(fā)者需要根據(jù)自身的需求來設(shè)置。比如對javascript的支持，對viewport的支持等。更詳細(xì)的細(xì)節(jié)可以查看WebView和Web app best practice。下面是一個設(shè)置web view的例子：

該例子中，“mUrl”代表要加載的URL。另外，頁面跳轉(zhuǎn)使用native的startActivity來多次實(shí)例化MainActivity；這種方式可以讓web頁面之間的跳轉(zhuǎn)具有類似native的體驗(yàn)，比如定制各種頁面切換動畫等，當(dāng)然，開發(fā)者可以選擇使用web的location.href。

第三，在assets中添加我們的web代碼，可以只用javascript、p_w_picpath、video、css等。下面是一個demo的web代碼目錄結(jié)構(gòu)：

其中page1.html的代碼如下：

最后，demo程序的運(yùn)行效果如下：

本demo的代碼可從Github上下載。

Cordova/PhoneGap

Cordova算是Hybrid界的一個核心，是大名鼎鼎的phoneGap的主要驅(qū)動框架。除了PhoneGap之外同時有很多其他可與其協(xié)作的工具集，比如“ionic”、“crosswalk”、“Framework 7”等，可以說是支撐起了hybrid的主要生態(tài)。

Cordova主要特性：

1. web引擎可替換。這一點(diǎn)保證了其運(yùn)行時有極大的靈活性，比如默認(rèn)情況下cordova會采用系統(tǒng)自帶的webview，而該控件在android 4.3以前表現(xiàn)非常差，所以可以將運(yùn)行時替換為crosswalk, crosswalk可以將最新的chromium引擎打包進(jìn)apk從而為所有4.1以上的android設(shè)備提供統(tǒng)一的UI渲染和高效的js執(zhí)行性能。

2. 豐富的native插件，擁有豐富的插件共享庫，并且開發(fā)者可以定制自己的插件。

3. 輕量級，核心框架非常緊湊，可以說只提供web和native的粘合劑，但是通過與其他優(yōu)秀的框架結(jié)合使用，比如Framework7, agular.js等，可以靈活地滿足開發(fā)者的需求。

PhoneGap是cordova最流行的一個發(fā)行版，它的核心是cordova，除此之外還提供了一些方便的調(diào)試和build工具。如果把cordova比作linux內(nèi)核的話，PhonaGap就相當(dāng)于Ubuntu或者Redhat等。

PhoneGap提供測主要工具有，GUI開發(fā)工具(適合喜歡圖形界面的開發(fā)者)， 瀏覽器端或手機(jī)端圖形化調(diào)試工具(不需要build成apk即可實(shí)時查看正在編寫的web頁面效果)，云端build(開發(fā)者不需要在本地安裝android sdk)等。

對于喜歡純命令行或者自己定制開發(fā)工具的開發(fā)者來說，推薦直接使用cordova，cordova也具有更大的靈活性。不過一般我們開發(fā)移動端app時，都希望實(shí)時看到web頁面的效果，所以對于大多數(shù)情況還是推薦從PhoneGap入手。

Cordova官方地址：http://cordova.apache.org/

PhoneGap官方地址：http://phonegap.com/

Crosswalk

Crosswalk是Intel Open Source Technology Center出的一個Hybrid框架。該框架以chromium引擎為核心，使用該框架app的web運(yùn)行時不使用android系統(tǒng)自帶的webview控件以及底層的渲染引擎，而是Crosswalk自己的引擎。開發(fā)者可以選擇將crosswalk運(yùn)行時直接打包進(jìn)apk，也可以選擇app在第一次運(yùn)行時從遠(yuǎn)程加載。前者會導(dǎo)致打包的apk較大，比一般的大25MB左右；后者會導(dǎo)致第一次運(yùn)行時加載比較慢。兩者都不是很完美，不過Crosswalk也有自己的優(yōu)勢。

首先，使用crosswalk運(yùn)行時可以保證在不同的android設(shè)備上擁有一致的UI渲染，同時chromium引擎的高性能可以保證js執(zhí)行效率比其他框架高出一大截。對于android 4.1 ~ 4.3的設(shè)備而言，因?yàn)橄到y(tǒng)還是采用webkit內(nèi)核，所以web的渲染和執(zhí)行效率嚴(yán)重不足，而crosswalk則可以解決這個問題。

其次，crosswalk可以保證與chromium的同步更新，開發(fā)者可以及時的用到這個優(yōu)秀引擎的許多最新特性。

結(jié)論

如果對于性能要求變態(tài)，想要精確控制內(nèi)存網(wǎng)絡(luò)等，推薦純native開發(fā)。

Hybrid的另外一個問題是，在大部分情況下，移動端的用戶已經(jīng)習(xí)慣了native的風(fēng)格的交互習(xí)慣，如果我們還想傳統(tǒng)PC web那樣寫頁面，很可能用戶不會買賬；而且傳統(tǒng)的web頁面風(fēng)格在移動端確實(shí)體驗(yàn)不是很好。這就導(dǎo)致我們的設(shè)計人員和開發(fā)者必須用web技術(shù)來寫出類似native的交互體驗(yàn)。

雖然，從零開始的用CSS也能寫出類似native的效果。但是，要將整個應(yīng)用的所有頁面都實(shí)現(xiàn)成一整套比較協(xié)調(diào)統(tǒng)一的native風(fēng)格還是需要花費(fèi)巨大精力的。所以，hybrid開發(fā)時，我們需要適合移動端的web UI框架。目前比較出名的有Framework 7, ionic，telerik, onsenui, famo等。

關(guān)于各個框架的優(yōu)劣，本文不做過多的介紹。不過，從UI的風(fēng)格，成熟度，使用量來看本文推薦Framework 7。