在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插件,允许用HTML代码与相机交互
这是关于如何将事件从您的原生 android 代码发送到 JavaScript 部分。 这可用于通知您的 JavaScript 应用程序,而无需先在 JavaScript 中注册任何回调,即硬件按钮或传感器触发器或任何其他设备操作的发生。 如何...
cordova自定义插件,js代码与原始交互的通道
通过自定义plugin插件实现了javascript与Android的交互。
> 此实例代码为 Android Studio 原生项目集成 Cordova 插件演示,而非通过 Cordova 直接编译,方便您在现有 Android Studio 项目中集成 Cordova 进行 H5 混合开发。 为了结构清晰及易维护性,项目分三个 Module ,...
适用于Cordova的GoogleGlass插件_Java_JavaScript_下载.zip
Cordova开发中,插件调用都只能调用本地的html,这个功能就是为了Cordova能调用远程的HTML页面,这样的话,一些逻辑可以放在服务器上,不需要全部打包放在app中,同时远程的html可以调用插件,调用方式同一般的...
Android Cordova 插件开发之编写自定义插件源码
Crosswalk+Cordova开发安卓app之 JavaScript调用java 源代码下载
Cordova插件Camera Preview的Cordova插件可以在适当的时候保持更新,该插件允许通过Javascript和HTML Releases进行摄像机交互。 但是,此插件正在不断开发中。 因此,它是recom Cordova插件的Camera Preview预览...
Cordova6.1、ionic、android交互自定义插件
Cordova插件-用于播放海康监控视频
自定义Cordova插件,开源的插件不满足需求时,可以自己开发自己的插件
特征: 检查指纹扫描仪是否可用 指纹认证 离子原生支持 后备选项 人脸识别支持 该插件的 4.0 版本是对以前版本的重大升级。以前的版本只允许视觉指纹提示。...如果您使用此插件进行审核,请告诉我结果
cordova调用安卓原生activity插件 使用简介 JS端使用方式 //sendData表示要从js端发送到原生activity的数据,需用json对象传输 var sendData = { id:10001, name:"Simon", age:28 }; window.cordova.plugins....
cordova-screenshot cordova截屏插件 document.addEventListener("deviceready", init, false); function init() { document.querySelector("#share").addEventListener("touchend", function() { navigator....
自定义cordova插件,添加到项目中使用(含参考链接,可自己学习)
ionic工程已经安装好插件
该资源是我学习使用Cordova自定义插件的完整源码,里面包含创建cordova项目,自定义插件等
如果没有,说明插件使用不当,尝试重新安装,如果有这些信息,说明Key与当前程序AndroidManifest.xml 中的package名不一致,请检查Key的申请信息是否正确 四,查看当前安装了哪些插件 cordova plugin ls 五,...