【新東網(wǎng)技術(shù)大咖帶您走進(jìn)Cordova】通過(guò)Apache Cordova將Web應(yīng)用移動(dòng)化

發(fā)布時(shí)間： 2016-12-16 11:55:25  

分享到：

文/黃劍鋒 智慧城市事業(yè)部

Apache Cordova是一個(gè)開(kāi)源的移動(dòng)開(kāi)發(fā)框架。 它可以讓你使用標(biāo)準(zhǔn)的Web技術(shù) - HTML5，CSS3和JavaScript進(jìn)行跨平臺(tái)開(kāi)發(fā)。 應(yīng)用程序在各個(gè)平臺(tái)上運(yùn)行，并通過(guò)標(biāo)準(zhǔn)的API來(lái)訪(fǎng)問(wèn)和使用手機(jī)內(nèi)嵌的各種設(shè)備的功能，如傳感器、本地?cái)?shù)據(jù)、網(wǎng)絡(luò)狀態(tài)等。

Apache Cordova主要適用于以下三種人：

移動(dòng)開(kāi)發(fā)者，希望可以實(shí)現(xiàn)跨平臺(tái)開(kāi)發(fā)，但同時(shí)又不希望花時(shí)間去學(xué)會(huì)各平臺(tái)的語(yǔ)言，或者重新開(kāi)發(fā)其他平臺(tái)的應(yīng)用。

Web開(kāi)發(fā)人員，希望在不接觸客戶(hù)端開(kāi)發(fā)人員的幫助下，就實(shí)現(xiàn)簡(jiǎn)單的Web移動(dòng)應(yīng)用程序的開(kāi)發(fā)。

插件開(kāi)發(fā)人員，希望在Web端訪(fǎng)問(wèn)移動(dòng)端設(shè)備，或者調(diào)用原生本地的方法，實(shí)現(xiàn)Web與原生混合開(kāi)發(fā)。

下圖是Cordova官網(wǎng)對(duì)于Cordova總體架構(gòu)的描述：

第一部分：Cordova Application是Cordova框架獨(dú)立于不同手機(jī)操作系統(tǒng)的一個(gè)封裝層。具體包括 ：

1）Web APP（包括具體的APP的HTML/JS/CSS代碼等）； 

2）Cordova框架已經(jīng)封裝好的核心插件（如相機(jī)、存儲(chǔ)等系統(tǒng)調(diào)用），這塊是Cordova的核心部分。當(dāng)然，開(kāi)發(fā)者也可以基于它的插件體系，擴(kuò)展出新的插件； 

第二部分：Mobile OS就是具體的手機(jī)操作系統(tǒng)層了，Cordova目前支持大部分的手機(jī)OS：iOS、Android、winphone、blackberry等等； 

這張圖可以讓我們一目了然地了解Cordova框架總體的技術(shù)架構(gòu)。實(shí)際上我們可以這么理解所謂的“跨平臺(tái)”： Cordova預(yù)先幫我們封裝了各種mobile OS上最常用的本地api調(diào)用，然后以統(tǒng)一的JavaScript api形式提供給Web APP開(kāi)發(fā)者調(diào)用。對(duì)于Web APP的開(kāi)發(fā)者來(lái)說(shuō)，無(wú)需關(guān)注系統(tǒng)底層調(diào)用實(shí)現(xiàn)細(xì)節(jié)，也就實(shí)現(xiàn)了所謂的“跨平臺(tái)”。實(shí)際上，各平臺(tái)涉及到本地能力的調(diào)用，以插件形式被封裝了。（每個(gè)插件的實(shí)現(xiàn)實(shí)際上還是Native模式）。

Cordova-Android是通過(guò)addJavascriptInterface（Android Webview的API）和JS Prompt這兩種方式來(lái)實(shí)現(xiàn)JS對(duì)于Native API的調(diào)用。

具體介紹這兩種方式前，我們先來(lái)看一個(gè)Cordova-Android框架中的一個(gè)關(guān)鍵類(lèi)：CordovaActivity.java。 該類(lèi)繼承了Android Activty類(lèi)，實(shí)際上是Cordova-Android的Launcher Activity，也就是啟動(dòng)入口activity。我們通過(guò)一張圖來(lái)描述下它干了哪些事： 

應(yīng)用啟動(dòng)后，核心干了兩件事：讀取config.xml和loadUrl。這個(gè)loadUrl實(shí)際上就是加載Web APP的啟動(dòng)頁(yè)（默認(rèn)是index.html）。而config.xml，它主要負(fù)責(zé)整個(gè)應(yīng)用程序信息的配置，對(duì)我們自定義的插件進(jìn)行聲明，在讀取config.xml時(shí)會(huì)將插件的類(lèi)名存到一個(gè)map中，以便從獲取到實(shí)例對(duì)象執(zhí)行相應(yīng)的方法。同時(shí)通過(guò)修改config.xml這個(gè)文件可以達(dá)到諸如是否加載遠(yuǎn)程一面、是否可通過(guò)H5直接調(diào)用撥打電話(huà)等功能。開(kāi)發(fā)者需要根據(jù)自己的實(shí)際需求來(lái)修改這個(gè)文件。

下圖為JS調(diào)用原生方法的整個(gè)流程：

CordovaActivity在執(zhí)行l(wèi)oadUrl時(shí)會(huì)先獲取一個(gè)CordovaWebVIew實(shí)例對(duì)象：

此時(shí)傳入的WebViewEngine對(duì)象的實(shí)體是SystemWebViewEngine：

在SystemWebViewEngine中，則是以addJavascriptInterface方式來(lái)實(shí)現(xiàn)Js調(diào)用原生的：

此時(shí)查看SystemExposedJsApi 

通過(guò)@JavascriptInterface暴露方法給JS，這里的exec接口方法實(shí)際上就實(shí)現(xiàn)了從JS到Native調(diào)用的“橋”。

CordovaBridge中的jsExec最終會(huì)執(zhí)行如下方法，其中g(shù)etPlugin是通過(guò)從JS端獲取到的service名稱(chēng)在pluginMap中獲取到對(duì)應(yīng)的插件類(lèi)，同時(shí)執(zhí)行execute方法，達(dá)到了JS調(diào)用原生的目的。

對(duì)于JS Prompt這種方式，原理上大同小異。實(shí)際上Cordova在SystemWebChromeClient.java這個(gè)類(lèi)中重載了OnJsPrompt方法。實(shí)際的調(diào)用過(guò)程如下：webapp->prompt()->OnJsPrompt()->Native()。