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

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

分享到：

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

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

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

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

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

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

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

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

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

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

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

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

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

具體介紹這兩種方式前，我們先來(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)描述下它干了哪些事： 

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

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

CordovaActivity在執行loadUrl時(shí)會(huì )先獲取一個(gè)CordovaWebVIew實(shí)例對象：

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

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

此時(shí)查看SystemExposedJsApi 

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

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

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