`
JerryWang_SAP
  • 浏览: 1043522 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

 

 
 
0
0
分享到:
评论

相关推荐

    自定义cordova插件

    当我们谈论自定义Cordova插件时,通常是因为Cordova默认提供的插件无法满足我们的全部需求,或者我们需要与特定的后端服务或硬件进行交互。自定义插件的创建过程包括以下几个步骤: 1. **创建插件结构**:首先,你...

    cordova自定义插件

    JavaScript与原生代码交互 - **调用原生代码:**在JavaScript中,通过`cordova.exec`函数调用原生代码,参数包括服务名、动作名、回调函数、成功回调、错误回调。 - **响应JavaScript:**原生代码通过`...

    Android-Cordova插件-用于播放海康监控视频

    通过调用JavaScript接口,我们可以触发Android平台上的Java代码,实现与硬件设备的交互,如播放视频流。 1. **创建Cordova项目** - 安装Cordova CLI并初始化一个新的Cordova项目。 - 使用`cordova create ...

    Android混合开发自定义Cordova插件

    - 插件是Cordova与设备原生功能交互的关键,每个插件都有JavaScript和Java两部分。 - JavaScript部分定义了公共接口,供Web应用调用;Java部分则实现了这些接口,与Android系统进行交互。 - 创建插件涉及编写`...

    Crosswalk+Cordova开发安卓app之 JavaScript调用java 源代码下载

    这个基础的"HelloWorld"示例是理解JavaScript与Java交互的一个很好的起点。通过这种方式,开发者可以利用Cordova和Crosswalk的强大功能,结合HTML5的便利性和Android原生API的深度,构建出功能丰富的混合应用。

    Android Cordova 插件开发之编写自定义插件

    在 Android 上开发 Cordova 插件,开发者可以将自己的 Java 代码与 JavaScript 交互,扩展 Cordova 应用的功能。本篇将深入探讨如何编写自定义的 Cordova 插件。 一、理解 Cordova 插件机制 Cordova 插件是连接 ...

    适用于Cordova的GoogleGlass插件_Java_JavaScript_下载.zip

    标题中的“适用于Cordova的GoogleGlass插件_Java_JavaScript_下载.zip”指的是一个专门为Apache Cordova开发的Google Glass插件,这个插件允许开发者使用Java和JavaScript这两种语言来扩展Google Glass的功能。...

    cordova和原生交互demo

    Cordova是一款开源的移动开发框架,它允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用。...在实际开发中,开发者可以根据需求选择合适的Cordova插件,或者开发自己的插件,以满足各种复杂的交互需求。

    调用cordova插件的一个ionic实例,插件包含android服务

    2. **自定义插件**:开发者创建了一个专门的Cordova插件,可能包含Java代码,用于与Android服务交互。这个插件应该位于`plugins`目录下,包含`plugin.xml`配置文件,定义了插件的元数据和JavaScript接口。 3. **...

    cordova 插件Demo工程

    2. 编写插件代码:在新创建的插件目录中,你需要编写原生平台(如Android、iOS)的代码以及与JavaScript交互的接口。通常包括`plugin.xml`配置文件,以及`src`目录下的原生代码。 3. 配置`plugin.xml`:这个文件...

    cordova 插件Demo工程(完整版)

    4. **编写插件代码**:在插件的源代码目录中,你需要编写JavaScript接口(暴露给Web层)和与之对应的原生代码(用于与设备交互)。原生代码通常包括Android的Java类和iOS的Objective-C或Swift类。 5. **配置插件**...

    自定义plugin插件实现phonegap与Android交互

    在"自定义plugin插件实现phonegap与Android交互"这个主题中,我们主要关注的是如何通过编写自定义插件来打通JavaScript和Android之间的通信壁垒。在PhoneGap中,Plugin是连接Web层和Native层的桥梁,它们是用Java...

    Cordova6.1、ionic、android交互自定义插件

    总的来说,理解和创建Cordova6.1、Ionic与Android交互的自定义插件,涉及到的知识点包括Cordova和Ionic的基础概念、插件系统的工作原理、Android SDK的使用以及JavaScript和Java之间的通信机制。通过这种方式,...

    用于设备接近传感器的 Cordova 插件_Java_代码_相关文件_下载

    【用于设备接近传感器的 Cordova 插件】是一款专为移动应用开发者设计的工具,它允许 JavaScript 与原生 Android 设备的红外(IR)接近传感器进行交互。Cordova 是一个流行的开源框架,它使开发者能够使用 HTML、CSS...

    cordova插件小例(他人)

    Cordova 的核心原理是将 Web 应用包装在原生应用容器中,通过插件系统与设备的硬件功能进行交互,比如访问摄像头、获取地理位置等。 在这个名为 "custom-cordova-plugin-blog-master" 的压缩包文件中,我们可能找到...

    cordova 和原生交互 调用h5页面

    9. **原生与H5交互**:Cordova提供了一套API,使得原生代码可以通过JavaScript接口与H5页面进行交互。例如,你可以使用`cordova.exec()`函数在JavaScript中调用Android的原生方法,而在原生代码中通过`cordova....

    cordova开发自定义插件(详细篇含jar包调用示例)

    在本文中,我们将深入探讨如何在Cordova环境中开发自定义插件,特别是涉及Java JAR包的调用以及Android与JavaScript之间的交互。 首先,让我们了解为什么需要创建自定义插件。Cordova的核心理念是提供一个桥梁,...

    android中使用cordova dialogs 插件例子

    1. **引入Cordova JavaScript库**:在HTML文件中引入`cordova.js`,确保可以在JavaScript中调用Cordova插件的方法。 ```html &lt;script type="text/javascript" src="cordova.js"&gt; ``` 2. **监听设备就绪事件**:...

    cordova 自定义蓝牙ibeacon扫描插件

    描述提到“自定义cordova插件”,意味着开发者针对Cordova平台进行了扩展,创建了一个新的功能模块,以满足特定需求。这个插件能够调用移动设备的原生蓝牙功能,进行iBeacon信号的扫描。同时,它还能解析接收到的...

Global site tag (gtag.js) - Google Analytics