Cordova插件中JavaScript代码与Java的交互细节介绍

MycLambert 发布于2019-08-16 13:26 / 2750人阅读

摘要：那么本身是代码，它是怎么调用到的实现的本文就会介绍这个细节。下图是离线存储插件的实现代码的一部分。待执行的的实现类名称。传递给的参数数组。

在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方法:

我们再回过头来看看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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/71748.html

Cordova插件中JavaScript代码与Java的交互细节介绍

摘要：那么本身是代码，它是怎么调用到的实现的本文就会介绍这个细节。下图是离线存储插件的实现代码的一部分。待执行的的实现类名称。传递给的参数数组。在Cordova官网中有这么一张架构图：大家看右下角蓝色的矩形框Custom Plugin——自定义插件。意思就是如果您用Cordova打包Mobile应用时，发现您的移动应用里需要使用一些功能，这些功能用普通的JavaScript无法实现，而是需...

sf_wangchong 2019-08-23 12:25 评论0 收藏0
Cordova应用的JavaScript代码和自定义插件代码的调试

摘要：首先打开安卓手机的调试模式，然后用数据线连接到电脑上。打开开发者工具，这里我就能看到我正在运行应用的三星手机，，状态处于已连接状态。我之前写过三篇Cordova相关的技术文章。当我们使用Cordova将自己开发的前端应用打包安装到手机上后，可能会遇到需要调试Cordova应用的时候。本文就介绍Cordova应用的调试步骤。如果大家读过之前我写的文章，就知道Cordova应用在移动...

LiangJ 2019-08-23 12:29 评论0 收藏0
cordova研习笔记(一) —— 初试牛刀之cordova.js概要

摘要：任何初始化任务应该在文件中的事件的事件处理函数中。这个配置文件有几个地方很关键，一开始没有认真看，将插件导进工程跑的时候各种问题，十分头痛，不得不重新认真看看文档。前言来新公司的第一个任务，研究hybrid App中间层实现原理，做中间层插件开发。这个任务挺有意思，也很有挑战性，之前在DCloud虽然做过5+ App开发，但是中间层的东西确实涉及不多。本系列文章属于系列开篇cord...

buildupchao 2019-08-20 16:04 评论0 收藏0
使用JavaScript调用手机平台上的原生API

摘要：注意看下图红色高亮的，起到了一个桥梁的作用，沟通了应用中的前端代码和手机操作系统中的原生。我之前曾经写过一篇文章使用Cordova将您的前端JavaScript应用打包成手机原生应用，介绍了如何使用Cordova框架将您的用JavaScript和HTML开发的前端应用打包成某个手机平台(比如Android，iOS）的原生应用。那么，您也许会有一些需求，需要在您的前端应用里使用到手机...

bingchen 2019-08-23 12:28 评论0 收藏0