日期:2014-05-16  浏览次数:20462 次

Cordova 3.x入门(11) -- JS是如何调用本地API的?
Cordova应用基于Webview,所以后台代码和js交互都是基于Webview(Webkit)的接口的。

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()方法
ExposedJsApi.java中定义了@JavascriptInterface标示的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为回传值)

以上就是完整的过程。