Android應用開發之Hybrid

標籤：android   cordova   hybrid   crosswalk   framework 7   

Android應用開發之Hybrid

什麼是Hybrid？

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

Native與Hybrid的本質區別是構建方式的不同，這些不同主要體現在應用程式框架和語言兩方面。

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

對於架構，Native使用的是標準的android sdk，Hybrid其實也是處於android sdk之上的，只不過加了一層更適合web開發的中介層。現有的Hybrid架構主要有，Crosswalk, Cordova，PhoneGap等。

為什麼使用Hybrid？

一般來說，如果我們開發的app要發布到各個移動平台，並且都是採用native開發的話，那麼我們就需要熟悉各個平台sdk與語言的技術人員；如果採用Hybrid方式的話，那麼使用web技術開發的頁面代碼就可以在各個平台共用。不過要注意的是，如果native向web層提供了一些自訂的外掛程式，就需要確保各個平台介面定義的統一性，否則web代碼在不同平台上無法正常工作。

另外，很多時候開發相同的頁面使用web技術會比native更加節省時間。

當然，使用web技術並不總是好的。首先是效能問題，一般web技術開發的頁面總是比native開發的運行要慢的，這是web的一塊很大的硬傷。不過隨著目前硬體和瀏覽器引擎效能的不斷最佳化，在體驗上兩者的差距會越來越小，這也是hybrid或純web能夠發展起來的重要原因之一；另一方面，在介面的全面性和能力上，web層也是沒有native層豐富的，不過這個問題可以通過打通web層和java層的介面來解決。總的來說，對於那些即時性要求較高或者過於複雜的頁面還是需要採用native來寫。

Hybrid有哪些方式？

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

不使用架構是指開發人員直接面對標準的android native介面自己來實現web頁面，一般情況下主要是利用webview及其相關介面，某些情況下還會使用第三方架構提供的嵌入式類webview模組，比如Crosswalk架構的XWalkView。這種的方式的優勢是靈活性較大，開發人員可以任意組織自己的h5代碼和native代碼。比較適合對native比較熟悉，能夠掌控上下層各種細節的開發人員。

native混合是指，使用的架構讓開發人員主要面對native相關開發，而把web作為附屬。這種方式和不適用架構有些類似，只不過其中的web採用了架構而已。適合對native比較熟悉，但又想藉助web架構的高效性的開發人員。

web混合是指，使用的架構讓開發人員主要面對web相關開發，而把native作為web的外掛程式來提供。這種適合對web更加熟悉，並且主要頁面都採用web開發的情況。通知這種方式也是未來的主流方式。

目前很多hybrid架構，比如crosswalk，cordova等都提供了native混合和web混合兩種開發模式，開發人員可根據自身及公司情況來選擇。

不使用第三方架構

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

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

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="match_parent"     android:layout_height="match_parent" >     <WebView         android:id="@+id/webview"         android:layout_width="match_parent"         android:layout_height="match_parent"/> </LinearLayout>

然後，在activity或者fragment擷取WebView執行個體並初始化。這裡的初始化涉及到，web view的各項能力，開發人員需要根據自身的需求來設定。比如對javascript的支援，對viewport的支援等。更詳細的細節可以查看WebView和Web app best practice。下面是一個設定web view的例子：

mWebView = (WebView) findViewById(R.id.webview); // Init WebView mWebView.getSettings().setJavaScriptEnabled(true); mWebView.getSettings().setUseWideViewPort(true); mWebView.setWebChromeClient(new WebChromeClient() {     public void onProgressChanged(WebView view, int progress) {         // Activities and WebViews measure progress with different scales.         // The progress meter will automatically disappear when we reach 100%         mActivity.setProgress(progress * 1000);     } }); mWebView.setWebViewClient(new WebViewClient() {     public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {         Toast.makeText(mActivity, "Oh no! " + description, Toast.LENGTH_SHORT).show();     } }); mWebView.addJavascriptInterface(new Object() {     @JavascriptInterface     public void startActivity(final String url) {         runOnUiThread(new Runnable() {             @Override             public void run() {                 Intent intent = new Intent(mActivity, MainActivity.class);                 intent.putExtra("url", url);                 mActivity.startActivity(intent);             }         });     } }, "Android"); mWebView.loadUrl(mUrl);

該例子中，“mUrl”代表要載入的URL。另外，頁面跳轉使用native的startActivity來多次執行個體化MainActivity；這種方式可以讓web頁面之間的跳轉具有類似native的體驗，比如定製各種頁面切換動畫等，當然，開發人員可以選擇使用web的location.href。

第三，在assets中添加我們的web代碼，可以只用javascript、image、video、css等。下面是一個demo的web代碼目錄結構：

650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/85/F7/wKiom1exMo2Cun3_AACzQqO8MO4935.png-wh_500x0-wm_3-wmp_4-s_3634196891.png" title="3BC2FA94-FE85-4030-9DEA-6CC75188430D.png" alt="wKiom1exMo2Cun3_AACzQqO8MO4935.png-wh_50" />

其中page1.html的代碼如下：

<html> <head>     <title>page1</title>     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>     <link rel="stylesheet" type="text/css" href="./css/style.css"/>     <script type="text/javascript" src="./script/eventHandler.js"></script> </head> <body> <p>This is page1.</p> <button type="button" value="Goto page2" onclick="onClick(‘file:///android_asset/page2.html‘)">Goto page2</button> <img src="./image/red_night.png"> </body> </html>

最後，demo程式的運行效果如下：

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M01/85/F7/wKioL1exMuGjxJVMAAQnmdIgBHw075.png-wh_500x0-wm_3-wmp_4-s_144686342.png" style="float:none;" title="A1AC7EAB-E143-414F-A319-8B3D776DDCFB.png" alt="wKioL1exMuGjxJVMAAQnmdIgBHw075.png-wh_50" />

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/85/F7/wKiom1exNYnA8jDlAATb8gWYGk4807.png-wh_500x0-wm_3-wmp_4-s_241970703.png" title="73EB2F9A-CC18-4341-92FC-7D626EC51D11.png" alt="wKiom1exNYnA8jDlAATb8gWYGk4807.png-wh_50" />

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/85/F7/wKioL1exNcGC6zzJAAQQYHhix9E319.png-wh_500x0-wm_3-wmp_4-s_675977524.png" title="813C909E-5A32-4B9B-B1FF-26286FAD139B.png" alt="wKioL1exNcGC6zzJAAQQYHhix9E319.png-wh_50" />

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

Cordova/PhoneGap

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

Cordova主要特性：

1. web引擎可替換。這一點保證了其運行時有極大的靈活性，比如預設情況下cordova會採用系統內建的webview，而該控制項在android 4.3以前表現非常差，所以可以將運行時替換為crosswalk, crosswalk可以將最新的chromium引擎打包進apk從而為所有4.1以上的android裝置提供統一的UI渲染和高效的js執行效能。

2. 豐富的native外掛程式，擁有豐富的外掛程式共用庫，並且開發人員可以定製自己的外掛程式。

3. 輕量級，核心架構非常緊湊，可以說只提供web和native的粘合劑，但是通過與其他優秀的架構結合使用，比如Framework7, agular.js等，可以靈活地滿足開發人員的需求。

PhoneGap是cordova最流行的一個發行版，它的核心是cordova，除此之外還提供了一些方便的調試和build工具。如果把cordova比作linux核心的話，PhonaGap就相當於Ubuntu或者Redhat等。

PhoneGap提供測主要工具有，GUI開發工具(適合喜歡圖形介面的開發人員)， 瀏覽器端或手機端圖形化調試工具(不需要build成apk即可即時查看正在編寫的web頁面效果)，雲端build(開發人員不需要在本地安裝android sdk)等。

對於喜歡純命令列或者自己定製開發工具的開發人員來說，推薦直接使用cordova，cordova也具有更大的靈活性。不過一般我們開發移動端app時，都希望即時看到web頁面的效果，所以對於大多數情況還是推薦從PhoneGap入手。

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

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

Crosswalk

Crosswalk是Intel Open Source Technology Center出的一個Hybrid架構。該架構以chromium引擎為核心，使用該架構app的web運行時不使用android系統內建的webview控制項以及底層的渲染引擎，而是Crosswalk自己的引擎。開發人員可以選擇將crosswalk運行時直接打包進apk，也可以選擇app在第一次運行時從遠程載入。前者會導致打包的apk較大，比一般的大25MB左右；後者會導致第一次運行時載入比較慢。兩者都不是很完美，不過Crosswalk也有自己的優勢。

首先，使用crosswalk運行時可以保證在不同的android裝置上擁有一致的UI渲染，同時chromium引擎的高效能可以保證js執行效率比其他架構高出一大截。對於android 4.1 ~ 4.3的裝置而言，因為系統還是採用webkit核心，所以web的渲染和執行效率嚴重不足，而crosswalk則可以解決這個問題。

其次，crosswalk可以保證與chromium的同步更新，開發人員可以及時的用到這個優秀引擎的許多最新特性。

結論

架構選擇	混合模式
如果不關心4.1到4.3的介面統一性和運行效能，想要架構的輕量級，考慮到社區的活躍程度，那麼推薦Cordova/PhoneGap。 如果必須要考慮4.1到4.3的使用者，並且對於介面渲染和執行效率有較高要求，推薦Crosswalk。當然也可以使用cordova/PhoneGap架構結合crosswalk運行時的方式。	如果比較關心介面的靈活性，擴充性，底層效能，架構穩定性那麼推薦native 混合。 如果想以web技術為主，推薦web 混合。

如果對於效能要求變態，想要精確控制記憶體網路等，推薦純native開發。

Hybrid的另外一個問題是，在大部分情況下，移動端的使用者已經習慣了native的風格的互動習慣，如果我們還想傳統PC web那樣寫頁面，很可能使用者不會買賬；而且傳統的web頁面風格在移動端確實體驗不是很好。這就導致我們的設計人員和開發人員必須用web技術來寫出類似native的互動體驗。

雖然，從零開始的用CSS也能寫出類似native的效果。但是，要將整個應用的所有頁面都實現成一整套比較協調統一的native風格還是需要花費巨大精力的。所以，hybrid開發時，我們需要適合移動端的web UI架構。目前比較出名的有Framework 7, ionic，telerik, onsenui, famo等。

關於各個架構的優劣，本文不做過多的介紹。不過，從UI的風格，成熟度等級，使用量來看本文推薦Framework 7。

本文出自 “技術總結” 部落格，請務必保留此出處http://9797337.blog.51cto.com/9787337/1838047

Android應用開發之Hybrid