溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

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

發(fā)布時(shí)間：2020-06-18 09:40:42 來(lái)源：網(wǎng)絡(luò) 閱讀：2030 作者：longsam 欄目：移動(dòng)開(kāi)發(fā)


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

什么是Hybrid？

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


Native與Hybrid的本質(zhì)區(qū)別是構(gòu)建方式的不同，這些不同主要體現(xiàn)在應(yīng)用框架和語(yǔ)言?xún)煞矫妗?/p>


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


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


為什么使用Hybrid？

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


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


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


Hybrid有哪些方式？

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


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


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


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


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



不使用第三方框架

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


首先，使用native方式定義一個(gè)activity或者fragment，其中的布局文件包含WebView。該webview就是顯示我們的web頁(yè)面的核心控件。下面是一個(gè)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實(shí)例并初始化。這里的初始化涉及到，web view的各項(xiàng)能力，開(kāi)發(fā)者需要根據(jù)自身的需求來(lái)設(shè)置。比如對(duì)javascript的支持，對(duì)viewport的支持等。更詳細(xì)的細(xì)節(jié)可以查看WebView和Web app best practice。下面是一個(gè)設(shè)置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。另外，頁(yè)面跳轉(zhuǎn)使用native的startActivity來(lái)多次實(shí)例化MainActivity；這種方式可以讓web頁(yè)面之間的跳轉(zhuǎn)具有類(lèi)似native的體驗(yàn)，比如定制各種頁(yè)面切換動(dòng)畫(huà)等，當(dāng)然，開(kāi)發(fā)者可以選擇使用web的location.href。


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

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



其中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="./p_w_picpath/red_night.png">
</body>
</html>



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


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


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


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



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



Cordova/PhoneGap


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


Cordova主要特性：


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


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


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


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


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


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


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

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



Crosswalk


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


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


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



結(jié)論


框架選擇

混合模式

如果不關(guān)心4.1到4.3的界面統(tǒng)一性和運(yùn)行性能，想要框架的輕量級(jí)，考慮到社區(qū)的活躍程度，那么推薦Cordova/PhoneGap。


如果必須要考慮4.1到4.3的用戶(hù)，并且對(duì)于界面渲染和執(zhí)行效率有較高要求，推薦Crosswalk。當(dāng)然也可以使用cordova/PhoneGap框架結(jié)合crosswalk運(yùn)行時(shí)的方式。



如果比較關(guān)心接口的靈活性，擴(kuò)展性，底層性能，框架穩(wěn)定性那么推薦native 混合。


如果想以web技術(shù)為主，推薦web 混合。


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


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


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


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


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手