Cordova应用基于Webview,所以后台代码和js交互都是基于Webview(Webkit)的接口的。
Android:WebView(WebKit-based) WebView(4.4 Chromium-based) Updatable-WebViews(5+)
@JavascriptInterface/WebView#addJavascriptInterface()
参考源码
ExposedJsApi.java
iOS:UIWebView(iOS 4+) WKWebView(iOS 8.1+)
UIWebViewDelegate/UIWebView#stringByEvaluatingJavaScriptFromString()
参考源码
CDVWebViewDelegate.m
以下以Android调用照相机为例,简单说明一下调用及回调过程。
(1)创建的过程
①添加插件
引用
cordova plugin add org.apache.cordova.camera
在plugins的目录下创建org.apache.cordova.camera文件夹,并将该Plugin的所有代码Copy进去,具体代码依赖关系都记录在plugin.xml里。
②创建Android工程
引用
cordova platform add android
从上边的Plugin文件夹中把Java文件和js文件Copy到Android工程的相应的文件夹下。
- platforms\android\src\org\apache\cordova\camera\CameraLauncher.java等
- platforms\android\assets\www\plugins\org.apache.cordova.camera\www\Camera.js等
其中CameraLauncher扩展自CordovaPlugin,而CordovaPlugin定义在platforms\android\CordovaLib中,它是Cordova的基础框架代码。
(2)调用的过程(JS->Native)
①HTML中引入cordova.js
引用
<script type="text/javascript" src="cordova.js"></script>
先做初始化处理,后根据cordova_plugins.js加载所有plugin的js文件。
②在deviceready事件中调用Camera
navigator.camera.getPicture(onSuccess, onFail,
{ quality: 50,
allowEdit: true,
destinationType: destinationType.DATA_URL });
③调用Camera.js的getPicture方法
assets\www\plugins\org.apache.cordova.camera\www\Camera.js
getPicture()
->
exec(successCallback, errorCallback, "Camera", "takePicture", args)
->
function androidExec(success, fail, service, action, args) ***cordova.js
->
var messages = nativeApiProvider.get().exec(service, action, callbackId, argsJson);
④调入Java的exec()方法
在CordovaWebView初期化的时候会根据Android的版本,将ExposedJsApi对象添加到CordovaWebView中。
this.addJavascriptInterface(exposedJsApi, "_cordovaNative");
所以nativeApiProvider.get()的时候会根据 _cordovaNative 对象是否存在来判断是使用JavascriptInterface方式,还是使用prompt方式。
如果使用JavascriptInterface方式(Android 4.2以上版本),直接进入ExposedJsApi.java中定义了@JavascriptInterface标示的exec()方法 。
如果使用prompt方式,CordovaChromeClient.java中重写了onJsPrompt()方法,来调用exposedJsApi.exec()。
prompt(argsJson, 'gap:'+JSON.stringify([service, action, callbackId]));
总之入口都是exposedJsApi.exec().
@JavascriptInterface
public String exec(String service, String action, String callbackId, String arguments)
->
pluginManager.exec(service, action, callbackId, arguments);
PluginManager根据service调用获取到相应的CordovaPlugin
->
CameraLauncher.execute(String action, JSONArray args, CallbackContext callbackContext)
CameraLauncher根据action,这里是“takePicture”做本地API调用。
->
takePicture()
->
new Intent("android.media.action.IMAGE_CAPTURE");
cordova.startActivityForResult()
调用CordovaInterface(CordovaActivity->Activity)的startActivityForResult
(3)回调的过程(Native->JS)
①上述API调用成功后,在onActivityResult(CameraLauncher.java)设置结果
onActivityResult(int requestCode, int resultCode, Intent intent)
// Send Uri back to JavaScript for viewing image
this.callbackContext.success(uri.toString());
②退回到ExposedJsApi的exec()方法
jsMessageQueue.setPaused(false);
->
NativeToJsMessageQueue的onNativeToJsMessageAvailable()
->
sendMessageMethod = webViewCore.getClass().getDeclaredMethod("sendMessage", Message.class)
->
sendMessageMethod.invoke(webViewCore, execJsMessage)
③cordova.js中接收消息
androidExec.processMessages(messages)
->
processMessage(message)
->
cordova.callbackFromNative(callbackId, success, status, [payload], keepCallback);
调用定义好的成功或者失败的JS回调函数。(payload为回传值)
以上就是完整的过程。
参考:
http://blog.devtang.com/blog/2012/03/24/talk-about-uiwebview-and-phonegap/
- 大小: 8.6 KB
分享到:
相关推荐
NULL 博文链接:https://rensanning.iteye.com/blog/2072034
NULL 博文链接:https://rensanning.iteye.com/blog/2023480
实实在在经过ant编译的cordova-2.9.1.jar 而不是有些人坑蒙拐骗的rar文件
cordova-plugin-app-update App updater for Cordova/PhoneGap Demo Try it yourself: Just clone and install this demo. cordova-plugin-app-update-DEMO :tada: 如果喜欢它,请别忘了给我一颗鼓励的星 Support ...
最新的cordova-js版本
NULL 博文链接:https://rensanning.iteye.com/blog/2047322
NULL 博文链接:https://rensanning.iteye.com/blog/2021619
百度地图定位Cordova插件,支持Android,IOS 可以在此地址查看example 基于百度地图Android版定位SDK(v7.1)以及百度地图IOS SDK (v3.2.1) 一,申请Android及IOS版密钥 申请密钥Android定位SDK 每一个...
NULL 博文链接:https://rensanning.iteye.com/blog/2163892
Cordova 3.x(aka PhoneGap)的基础知识、实用插件、源码分析、实例开发。
Ionic3.x+、Angular4.x+ Cordova 介 绍以及Ionic3.x+环境搭建 一、Ionic 介绍............................................................................................................................1 二...
NULL 博文链接:https://rensanning.iteye.com/blog/2029362
1,cordova-android-3.3.0 源码 ...3,cordova-android-3.3.jar https://git-wip-us.apache.org/repos/asf?s=cordova config.xml请移步看文章:http://blog.csdn.net/vpivot/article/details/17376789
cordova-plugin-firebase-analytics, 用于Firebase分析的Cordova插件 cordova-plugin-firebase-analytics Firebase分析插件的Cordova插件。安装cordova plugin add cordova-plugin-firebase-analyti
记录了我安全完成cordova工具后,用它生成apk的过程记录
Cordova的文件打开器插件 该插件将使用其默认应用程序在您的设备文件系统上打开一个文件。 cordova . plugins . fileOpener2 . open ( filePath , fileMIMEType , { error : function ( ) { } , success : function ...
NULL 博文链接:https://rensanning.iteye.com/blog/2036318