js通过cordova调用本地代码
来源:互联网 发布:淘宝新势力周怎么报名 编辑:程序博客网 时间:2024/05/14 03:30
Cordova 3.x 基础(11) -- JS是如何调用本地API的?
- 博客分类:
- Cordova
CordovaPhoneGap
Cordova应用基于Webview,所以后台代码和js交互都是基于Webview(Webkit)的接口的。
Android:
@JavascriptInterface/WebView#addJavascriptInterface()
参考源码 ExposedJsApi.java
iOS :
UIWebViewDelegate/UIWebView#stringByEvaluatingJavaScriptFromString()
参考源码 CDVWebViewDelegate.m
以下以Android调用照相机为例,简单说明一下调用及回调过程。
(1)创建的过程
①添加插件
在plugins的目录下创建org.apache.cordova.camera文件夹,并将该Plugin的所有代码Copy进去,具体代码依赖关系都记录在plugin.xml里。
②创建Android工程
从上边的Plugin文件夹中把Java文件和js文件Copy到Android工程的相应的文件夹下。
其中CameraLauncher扩展自CordovaPlugin,而CordovaPlugin定义在platforms\android\CordovaLib中,它是Cordova的基础框架代码。
(2)调用的过程(JS->Native)
①HTML中引入cordova.js
先做初始化处理,后根据cordova_plugins.js加载所有plugin的js文件。
②在deviceready事件中调用Camera
③调用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为回传值)
以上就是完整的过程。
Android:
@JavascriptInterface/WebView#addJavascriptInterface()
参考源码 ExposedJsApi.java
iOS :
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为回传值)
以上就是完整的过程。
0 0
- js通过cordova调用本地代码
- PhoneGap(Cordova)之js调用本地native的方法
- Cordova plugin 调用本地 notification
- js调用android本地代码失败 兼容问题
- phonegap js 和 本地代码 调用原理
- android Js调用本地代码不识别
- PhoneGap(Cordova)之js调用本地native的方法 2
- Cordova 3.x 基础(11) -- JS是如何调用本地API的?
- android Js通过wepView调用原生代码
- cordova调用本地SQLite数据库的方法
- js通过NPAPI调用本地应用程序并传参
- Cordova通过CordovaPlugin插件调用 Activity
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
- android js与本地java代码互相调用
- Webview中js与本地java代码的互相调用
- cordova 插件中原生调用js
- Cordova中JavaScript/TypeScript调用原生代码
- Linux设备驱动程序学习笔记07:字符设备驱动程序V
- 黑马程序员—创建线程的二种方式
- poj 2503 Babelfish (map,trie 树)
- 使用CSS3 Flexbox布局
- leetcode Candy
- js通过cordova调用本地代码
- 简述Java的发展史
- linux mysql 操作命令
- ldd3第二章-----建立内核源码树,编译模块
- 亲密关系里的安全感
- iOS设计模式(02):单例模式
- python操作redis
- poj1002~简单排序题
- SecureCRT telnet 自动登陆的设置