在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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
相关推荐
当我们谈论自定义Cordova插件时,通常是因为Cordova默认提供的插件无法满足我们的全部需求,或者我们需要与特定的后端服务或硬件进行交互。自定义插件的创建过程包括以下几个步骤: 1. **创建插件结构**:首先,你...
JavaScript与原生代码交互 - **调用原生代码:**在JavaScript中,通过`cordova.exec`函数调用原生代码,参数包括服务名、动作名、回调函数、成功回调、错误回调。 - **响应JavaScript:**原生代码通过`...
通过调用JavaScript接口,我们可以触发Android平台上的Java代码,实现与硬件设备的交互,如播放视频流。 1. **创建Cordova项目** - 安装Cordova CLI并初始化一个新的Cordova项目。 - 使用`cordova create ...
- 插件是Cordova与设备原生功能交互的关键,每个插件都有JavaScript和Java两部分。 - JavaScript部分定义了公共接口,供Web应用调用;Java部分则实现了这些接口,与Android系统进行交互。 - 创建插件涉及编写`...
这个基础的"HelloWorld"示例是理解JavaScript与Java交互的一个很好的起点。通过这种方式,开发者可以利用Cordova和Crosswalk的强大功能,结合HTML5的便利性和Android原生API的深度,构建出功能丰富的混合应用。
在 Android 上开发 Cordova 插件,开发者可以将自己的 Java 代码与 JavaScript 交互,扩展 Cordova 应用的功能。本篇将深入探讨如何编写自定义的 Cordova 插件。 一、理解 Cordova 插件机制 Cordova 插件是连接 ...
标题中的“适用于Cordova的GoogleGlass插件_Java_JavaScript_下载.zip”指的是一个专门为Apache Cordova开发的Google Glass插件,这个插件允许开发者使用Java和JavaScript这两种语言来扩展Google Glass的功能。...
Cordova是一款开源的移动开发框架,它允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用。...在实际开发中,开发者可以根据需求选择合适的Cordova插件,或者开发自己的插件,以满足各种复杂的交互需求。
2. **自定义插件**:开发者创建了一个专门的Cordova插件,可能包含Java代码,用于与Android服务交互。这个插件应该位于`plugins`目录下,包含`plugin.xml`配置文件,定义了插件的元数据和JavaScript接口。 3. **...
2. 编写插件代码:在新创建的插件目录中,你需要编写原生平台(如Android、iOS)的代码以及与JavaScript交互的接口。通常包括`plugin.xml`配置文件,以及`src`目录下的原生代码。 3. 配置`plugin.xml`:这个文件...
4. **编写插件代码**:在插件的源代码目录中,你需要编写JavaScript接口(暴露给Web层)和与之对应的原生代码(用于与设备交互)。原生代码通常包括Android的Java类和iOS的Objective-C或Swift类。 5. **配置插件**...
在"自定义plugin插件实现phonegap与Android交互"这个主题中,我们主要关注的是如何通过编写自定义插件来打通JavaScript和Android之间的通信壁垒。在PhoneGap中,Plugin是连接Web层和Native层的桥梁,它们是用Java...
总的来说,理解和创建Cordova6.1、Ionic与Android交互的自定义插件,涉及到的知识点包括Cordova和Ionic的基础概念、插件系统的工作原理、Android SDK的使用以及JavaScript和Java之间的通信机制。通过这种方式,...
【用于设备接近传感器的 Cordova 插件】是一款专为移动应用开发者设计的工具,它允许 JavaScript 与原生 Android 设备的红外(IR)接近传感器进行交互。Cordova 是一个流行的开源框架,它使开发者能够使用 HTML、CSS...
Cordova 的核心原理是将 Web 应用包装在原生应用容器中,通过插件系统与设备的硬件功能进行交互,比如访问摄像头、获取地理位置等。 在这个名为 "custom-cordova-plugin-blog-master" 的压缩包文件中,我们可能找到...
9. **原生与H5交互**:Cordova提供了一套API,使得原生代码可以通过JavaScript接口与H5页面进行交互。例如,你可以使用`cordova.exec()`函数在JavaScript中调用Android的原生方法,而在原生代码中通过`cordova....
在本文中,我们将深入探讨如何在Cordova环境中开发自定义插件,特别是涉及Java JAR包的调用以及Android与JavaScript之间的交互。 首先,让我们了解为什么需要创建自定义插件。Cordova的核心理念是提供一个桥梁,...
1. **引入Cordova JavaScript库**:在HTML文件中引入`cordova.js`,确保可以在JavaScript中调用Cordova插件的方法。 ```html <script type="text/javascript" src="cordova.js"> ``` 2. **监听设备就绪事件**:...
描述提到“自定义cordova插件”,意味着开发者针对Cordova平台进行了扩展,创建了一个新的功能模块,以满足特定需求。这个插件能够调用移动设备的原生蓝牙功能,进行iBeacon信号的扫描。同时,它还能解析接收到的...