【新東網技術大咖帶您走進Cordova】通過Apache Cordova將Web應用移動化

發布時間： 2016-12-16 11:55:25  

分享到：

文/黃劍鋒 智慧城市事業部

Apache Cordova是一個開源的移動開發框架。 它可以讓你使用標準的Web技術 - HTML5，CSS3和JavaScript進行跨平臺開發。 應用程序在各個平臺上運行，并通過標準的API來訪問和使用手機內嵌的各種設備的功能，如傳感器、本地數據、網絡狀態等。

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

移動開發者，希望可以實現跨平臺開發，但同時又不希望花時間去學會各平臺的語言，或者重新開發其他平臺的應用。

Web開發人員，希望在不接觸客戶端開發人員的幫助下，就實現簡單的Web移動應用程序的開發。

插件開發人員，希望在Web端訪問移動端設備，或者調用原生本地的方法，實現Web與原生混合開發。

下圖是Cordova官網對于Cordova總體架構的描述：

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

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

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

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

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

Cordova-Android是通過addJavascriptInterface（Android Webview的API）和JS Prompt這兩種方式來實現JS對于Native API的調用。

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

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

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

CordovaActivity在執行loadUrl時會先獲取一個CordovaWebVIew實例對象：

此時傳入的WebViewEngine對象的實體是SystemWebViewEngine：

在SystemWebViewEngine中，則是以addJavascriptInterface方式來實現Js調用原生的：

此時查看SystemExposedJsApi 

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

CordovaBridge中的jsExec最終會執行如下方法，其中getPlugin是通過從JS端獲取到的service名稱在pluginMap中獲取到對應的插件類，同時執行execute方法，達到了JS調用原生的目的。

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