【新東網(wǎng)技術(shù)大咖帶您走進Cordova】通過Apache Cordova將Web應(yīng)用移動化
發(fā)布時間: 2016-12-16 11:55:25
文/黃劍鋒 智慧城市事業(yè)部
Apache Cordova是一個開源的移動開發(fā)框架。 它可以讓你使用標準的Web技術(shù) - HTML5,CSS3和JavaScript進行跨平臺開發(fā)。 應(yīng)用程序在各個平臺上運行,并通過標準的API來訪問和使用手機內(nèi)嵌的各種設(shè)備的功能,如傳感器、本地數(shù)據(jù)、網(wǎng)絡(luò)狀態(tài)等。
Apache Cordova主要適用于以下三種人:
移動開發(fā)者,希望可以實現(xiàn)跨平臺開發(fā),但同時又不希望花時間去學(xué)會各平臺的語言,或者重新開發(fā)其他平臺的應(yīng)用。
Web開發(fā)人員,希望在不接觸客戶端開發(fā)人員的幫助下,就實現(xiàn)簡單的Web移動應(yīng)用程序的開發(fā)。
插件開發(fā)人員,希望在Web端訪問移動端設(shè)備,或者調(diào)用原生本地的方法,實現(xiàn)Web與原生混合開發(fā)。
下圖是Cordova官網(wǎng)對于Cordova總體架構(gòu)的描述:
第一部分:Cordova Application是Cordova框架獨立于不同手機操作系統(tǒng)的一個封裝層。具體包括 :
1)Web APP(包括具體的APP的HTML/JS/CSS代碼等);
2)Cordova框架已經(jīng)封裝好的核心插件(如相機、存儲等系統(tǒng)調(diào)用),這塊是Cordova的核心部分。當然,開發(fā)者也可以基于它的插件體系,擴展出新的插件;
第二部分:Mobile OS就是具體的手機操作系統(tǒng)層了,Cordova目前支持大部分的手機OS:iOS、Android、winphone、blackberry等等;
這張圖可以讓我們一目了然地了解Cordova框架總體的技術(shù)架構(gòu)。實際上我們可以這么理解所謂的“跨平臺”: Cordova預(yù)先幫我們封裝了各種mobile OS上最常用的本地api調(diào)用,然后以統(tǒng)一的JavaScript api形式提供給Web APP開發(fā)者調(diào)用。對于Web APP的開發(fā)者來說,無需關(guān)注系統(tǒng)底層調(diào)用實現(xiàn)細節(jié),也就實現(xiàn)了所謂的“跨平臺”。實際上,各平臺涉及到本地能力的調(diào)用,以插件形式被封裝了。(每個插件的實現(xiàn)實際上還是Native模式)。
Cordova-Android是通過addJavascriptInterface(Android Webview的API)和JS Prompt這兩種方式來實現(xiàn)JS對于Native API的調(diào)用。
具體介紹這兩種方式前,我們先來看一個Cordova-Android框架中的一個關(guān)鍵類:CordovaActivity.java。 該類繼承了Android Activty類,實際上是Cordova-Android的Launcher Activity,也就是啟動入口activity。我們通過一張圖來描述下它干了哪些事:
應(yīng)用啟動后,核心干了兩件事:讀取config.xml和loadUrl。這個loadUrl實際上就是加載Web APP的啟動頁(默認是index.html)。而config.xml,它主要負責(zé)整個應(yīng)用程序信息的配置,對我們自定義的插件進行聲明,在讀取config.xml時會將插件的類名存到一個map中,以便從獲取到實例對象執(zhí)行相應(yīng)的方法。同時通過修改config.xml這個文件可以達到諸如是否加載遠程一面、是否可通過H5直接調(diào)用撥打電話等功能。開發(fā)者需要根據(jù)自己的實際需求來修改這個文件。
下圖為JS調(diào)用原生方法的整個流程:
CordovaActivity在執(zhí)行l(wèi)oadUrl時會先獲取一個CordovaWebVIew實例對象:
此時傳入的WebViewEngine對象的實體是SystemWebViewEngine:
在SystemWebViewEngine中,則是以addJavascriptInterface方式來實現(xiàn)Js調(diào)用原生的:
此時查看SystemExposedJsApi
通過@JavascriptInterface暴露方法給JS,這里的exec接口方法實際上就實現(xiàn)了從JS到Native調(diào)用的“橋”。
CordovaBridge中的jsExec最終會執(zhí)行如下方法,其中g(shù)etPlugin是通過從JS端獲取到的service名稱在pluginMap中獲取到對應(yīng)的插件類,同時執(zhí)行execute方法,達到了JS調(diào)用原生的目的。
對于JS Prompt這種方式,原理上大同小異。實際上Cordova在SystemWebChromeClient.java這個類中重載了OnJsPrompt方法。實際的調(diào)用過程如下:webapp->prompt()->OnJsPrompt()->Native()。