cordova Java交互_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。

be86ef7fde4a2054da2ed0d022c5f357.png

那么JavaScript wrapper本身是JavaScript代码,它是怎么调用到Custom Plugin的Java实现的?本文就会介绍这个细节。

下图是OData离线存储插件(OData Offline Store)的JavaScript实现代码的一部分。下图第232行会调用设备的native API进行离线存储的打开操作:

exec(win, error, 'OData', 'openOfflineStore', [this, options ? options : {}]);

17a71effdfc6f0b8058f2e2221e8c4c7.png

这个exec函数从哪里来?由Cordova框架实现,通过语句 require(‘cordova/exec’)返回。

4dcf736b4beed552ba440f23c44f1840.png

那么当应用执行到JavaScript代码:exec(win, error, 'OData', 'openOfflineStore', [this, options ? options : {}]); 的时候,程序流是如何从这个JavaScript的exec函数进入到Android平台的原生API执行呢?

打开PackagedApp文件夹里的android子文件夹,有一个JavaScript文件:cordova.js:

0a52f82478ac7c5263fcb18f48443c76.png

里面能看到函数exec的定义和实现:

423512969ab6893e27510d04e63ce52c.png

e701829623b7627fdd98687cef8acc54.png

进而去查看androidExec函数的实现细节:

5c8a759b781e551520dfce760a8243e0.png

第938行:var msgs = nativeApiProvider.get().exec(bridgeSecret, service, action, callbackId, argsJson);

第943行的五个参数含义:

success, fail, service, action, argssuccess & 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:

61a2a89e9e685496b13bc8eac23a801c.png

看下面这段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方法:

我们再回过头来看看AndroidExec的实现:

var msgs = nativeApiProvider.get().exec(bridgeSecret, service, action, callbackId, argsJson);

在AndroidExec的实现里, nativeApiProvider的get方法返回一个实例,然后执行exec方法。而881行代码说明nativeApiProvider的实现位于文件夹cordova/android下面的nativeapiprovider.js里:

f8999087e3df467168afd8cdaabd6c69.png

打开nativeapiprovider.js,在第21行的注释里我们得到了重要信息: currentApi要么来自Java文件ExposedJsApi.java,要么来自PromptBasedNativeApi.java。

9cd0c72be5c0cd88521a0aa5f78d3f9b.png

Java文件ExposedJsApi.java可以在这个文件夹内找到:

platform/android/CordovaLib/src/org/apache/cordova

66aaf4d93b56c057526763256820e344.png

ExposedJsApi实际就是个Java interface,上面声明了一个exec方法:

9ca73fbcd475502c90a6968c35b5d970.png

JavaScript到Java的执行通过prompt调用完成:

f2bcc314ea334f03a4bac307b2152e7e.png

Java类SystemExposedJsApi实现了这个interface,再将执行流转交给类CordovaBridge的实例.

40fad91d0a65996e8699e7acba4fdf51.png

CordovaBridge再调用PluginManager:

f3304adf2bbfeb13167b9a8ccc91b5a5.png

PluginManager首先根据名字找到负责处理该请求的Java plugin的实现类,再调用该实现类的方法:

9e4ccb26534a1fcfdad3ad37c73b804b.png

以OData离线存储的实现类为例,我们在其实现代码里能发现有大量的IF-ELSE分支,每个分支处理不同的离线存储操作请求。

70bf8ecc887d397bd1716dcf61e4e969.png

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值