Cordova外掛中JavaScript程式碼與Java的互動細節介紹
在Cordova官網中有這麼一張架構圖:大家看右下角藍色的矩形框"Custom Plugin"——自定義外掛。意思就是如果您用Cordova打包Mobile應用時,發現您的移動應用裡需要使用一些功能,這些功能用普通的JavaScript無法實現,而是需要呼叫移動平臺的一些原生API才能實現時,我們就需要自己實現自定義外掛。這些外掛透過在特定的移動平臺上採用原生開發實現,比如Android Studio中的Java開發,然後再透過JavaScript wrapper的方式暴露給您的Mobile應用。比如您是用Cordova在Android平臺上打包生成APK檔案,那麼您的Mobile程式碼(JavaScript)裡還是不會直接呼叫您用Java實現的Custom Plugin,而是呼叫Custom Plugin對應的JavaScript wrapper。
那麼JavaScript wrapper本身是JavaScript程式碼,它是怎麼呼叫到Custom Plugin的Java實現的?本文就會介紹這個細節。
下圖是OData離線儲存外掛(OData Offline Store)的JavaScript實現程式碼的一部分。下圖第232行會呼叫裝置的native API進行離線儲存的開啟操作:
exec(win, error, 'OData', 'openOfflineStore', [this, options ? options : {}]);
這個exec函式從哪裡來?由Cordova框架實現,透過語句 require(‘cordova/exec’)返回。
那麼當應用執行到JavaScript程式碼:exec(win, error, 'OData', 'openOfflineStore', [this, options ? options : {}]); 的時候,程式流是如何從這個JavaScript的exec函式進入到Android平臺的原生API執行呢?
開啟PackagedApp資料夾裡的android子資料夾,有一個JavaScript檔案:cordova.js:
裡面能看到函式exec的定義和實現:
進而去檢視androidExec函式的實現細節:
第938行:var msgs = nativeApiProvider.get().exec(bridgeSecret, service, action, callbackId, argsJson);
第943行的五個引數含義:
success, fail, service, action, args
-
success & fail: JavaScript回撥函式,當移動平臺上的Java原生API執行完畢後,這個JavaScript回撥函式會被呼叫到。
-
service: 待執行的Java Native API的Java實現類名稱。
-
action: 待執行的Java Native API的Java實現類的方法名稱。
-
args: JavaScript傳遞給Java native API的引數陣列。
2. 在安卓平臺上,JavaScript呼叫Java的技術實現方式有兩種:定義在下圖JavaScript程式碼中的jsToNativeModes物件中:PROMPT和JS_OBJECT。相對應的,Java呼叫JavaScript有三種模式:POLLING, LOAD_URL和ONLINE_EVENT:
看下面這段Java程式碼,暴露了一個方法getSomeString給JavaScript端消費:
import android.app.Activity;import android.os.Bundle;import android.webkit.WebView;public class WebViewGUI extends Activity { WebView mWebView; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mWebView = new WebView(this); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.addJavascriptInterface(new JavaScriptInterface(), "jsinterface"); mWebView.loadUrl("file:///android_asset/www/index.html"); setContentView(mWebView); } final class JavaScriptInterface { JavaScriptInterface() { } public String getSomeString() { return "string"; } } }
在JavaScript程式碼裡消費上述Java程式碼暴露的getSomeString方法:
<script>var String = window.jsinterface.getSomeString();</script>
我們再回過頭來看看AndroidExec的實現:
var msgs = nativeApiProvider.get().exec(bridgeSecret, service, action, callbackId, argsJson);
在AndroidExec的實現裡, nativeApiProvider的get方法返回一個例項,然後執行exec方法。而881行程式碼說明nativeApiProvider的實現位於資料夾cordova/android下面的nativeapiprovider.js裡:
開啟nativeapiprovider.js,在第21行的註釋裡我們得到了重要資訊: currentApi要麼來自Java檔案ExposedJsApi.java,要麼來自PromptBasedNativeApi.java。
Java檔案ExposedJsApi.java可以在這個資料夾內找到:
platform/android/CordovaLib/src/org/apache/cordova
ExposedJsApi實際就是個Java interface,上面宣告瞭一個exec方法:
JavaScript到Java的執行透過prompt呼叫完成:
Java類SystemExposedJsApi實現了這個interface,再將執行流轉交給類CordovaBridge的例項.
CordovaBridge再呼叫PluginManager:
PluginManager首先根據名字找到負責處理該請求的Java plugin的實現類,再呼叫該實現類的方法:
以OData離線儲存的實現類為例,我們在其實現程式碼裡能發現有大量的IF-ELSE分支,每個分支處理不同的離線儲存操作請求。
要獲取更多Jerry的原創技術文章,請關注公眾號"汪子熙"或者掃描下面二維碼:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2212655/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Cordova應用的JavaScript程式碼和自定義外掛程式碼的除錯JavaScript除錯
- javascript節點型別詳細介紹JavaScript型別
- 科大訊飛cordova語音外掛填坑及api介紹API
- Java 與底層作業系統的互動細節Java作業系統
- AndroidWebView與JavaScript程式碼互動AndroidWebViewJavaScript
- VS2010常用外掛介紹之Javascript外掛JavaScript
- 如何建立Cordova外掛
- chatgpt~外掛介紹ChatGPT
- PostCSS 常用外掛與語法介紹CSS
- Java和作業系統互動細節Java作業系統
- Java 和作業系統互動細節Java作業系統
- javascript this詳細介紹JavaScript
- cordova列印外掛備註
- rematch常用外掛介紹REM
- 3.03 模組外掛介紹
- Maven Assembly外掛介紹Maven
- Vue程式碼模組定位外掛vue-component-finder介紹Vue
- Android中Java和JavaScript互動AndroidJavaScript
- logstash常用外掛介紹
- MySQL審計外掛介紹MySql
- 程式碼自動生成外掛:
- Cordova JS OC互動方法JS
- [VS Code擴充套件]寫一個程式碼片段管理外掛(一):介紹與介面搭建套件
- Webpack 打包 Javascript 詳細介紹WebJavaScript
- Android Studio Plugin 外掛開發教程(二) —— 外掛SDK中的常用物件介紹AndroidPlugin物件
- JavaScript FormData的詳細介紹及使用JavaScriptORM
- IDEA外掛:快速刪除Java程式碼中的註釋IdeaJava
- 詳細介紹Java中的堆、棧和常量池Java
- Cordova學習--iOS自定義外掛iOS
- MySQL連線控制外掛介紹MySql
- 常用Maven外掛介紹(轉載)Maven
- javascript的節點相關內容介紹JavaScript
- javascript程式碼規範簡單介紹JavaScript
- 5-14節介紹SWT/JFace的演示程式碼
- Mongoose-modified-at 時間自動記錄外掛介紹Go
- Android WebView —— Java 與 JavaScript 互動總結AndroidWebViewJavaScript
- Android 與WebView中的js程式碼的互動記錄AndroidWebViewJS
- javascript函式中with的介紹JavaScript函式