cordova js 调用

Cordova 是一个开源的移动应用开发框架，它允许开发者使用 HTML、CSS 和 JavaScript 等 Web 技术开发跨平台的移动应用程序，在 Cordova 中，JavaScript 与原生代码（如 Java、Objective-C/Swift）之间的交互是非常重要的一环，以下是关于 Cordova JS 调用的详细回答：

1、通过插件调用 JS 代码

创建 Cordova 插件：

插件基本结构：一个 Cordova 插件通常包含plugin.xml（配置文件，定义插件的基本信息、依赖关系和接口）、src 目录（存放原生代码，如 Java、Swift 等）以及www 目录（存放 JavaScript 代码）。

创建插件：可以使用 Cordova 的命令行工具创建插件，例如cordova plugin create <plugin-name> --id <plugin-id> --plugin-version <version>，该命令会自动生成插件的基本结构，开发者可在此基础上修改和扩展。

编写原生代码：以 Android 平台为例，在src/android 目录中创建一个 Java 类继承自CordovaPlugin 类，在该类的execute 方法中，根据传入的 action 参数判断要执行的操作，action 是自定义的操作，如 “myAction”，则在对应的方法中实现具体的业务逻辑，并通过webView.loadUrl 方法调用 JS 代码。

 public class MyPlugin extends CordovaPlugin {
       @Override
       public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
           if (“myAction”.equals(action)) {
               this.myAction(args, callbackContext);
               return true;
           }
           return false;
       }
       private void myAction(JSONArray args, CallbackContext callbackContext) {
           // 实现具体的业务逻辑
           // 调用 JS 代码
           String jsCode = “javascript:myJsFunction()”;
           webView.loadUrl(jsCode);
           callbackContext.success();
       }
   }

在 JavaScript 中调用插件：在 JavaScript 代码中，通过cordova.exec 方法调用插件提供的接口。

 document.addEventListener(“deviceready”, onDeviceReady, false);
   function onDeviceReady() {
       cordova.exec(successCallback, errorCallback, “MyPlugin”, “myAction”, [“arg1”, “arg2”]);
   }
   function successCallback(result) {
       console.log(“Success: ” + result);
   }
   function errorCallback(error) {
       console.error(“Error: ” + error);
   }

2、使用事件监听器

设备就绪事件：设备就绪事件（deviceready）是 Cordova 最常用的事件之一，当设备准备完毕并且 Cordova 已经完全加载时，会触发此事件，在 JavaScript 中使用document.addEventListener 方法监听该事件，并在回调函数中编写设备准备完毕后要执行的代码。

 document.addEventListener(“deviceready”, onDeviceReady, false);
   function onDeviceReady() {
       // 设备准备完毕后执行的代码
   }

自定义事件：开发者还可以自定义事件，并在原生代码中触发这些事件，在原生代码中，通过cordova.fireDocumentEvent 方法触发自定义事件，并传递事件数据。

 public class MyPlugin extends CordovaPlugin {
       @Override
       public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
           if (“triggerEvent”.equals(action)) {
               this.triggerEvent(args, callbackContext);
               return true;
           }
           return false;
       }
       private void triggerEvent(JSONArray args, CallbackContext callbackContext) {
           // 创建自定义事件
           String eventName = “myCustomEvent”;
           String eventData = “{ ‘key’: ‘value’ }”;
           String jsCode = String.format(“javascript:cordova.fireDocumentEvent(‘%s’, %s);”, eventName, eventData);
           // 调用 JS 代码触发事件
           webView.loadUrl(jsCode);
           callbackContext.success();
       }
   }

在 JavaScript 中使用document.addEventListener 方法监听自定义事件：

 document.addEventListener(“myCustomEvent”, function(e) {
       var data = e.detail;
       console.log(data.key); // 输出 “value”
   });

3、利用 WebView 通信接口

Android 平台：在 Android 平台的 Java 代码中，可以使用evaluateJavascript 方法调用 JS 代码，并获取其执行结果。

 webView.evaluateJavascript(“myJsFunction()”, new ValueCallback<String>() {
       @Override
       public void onReceiveValue(String value) {
           // 处理 JS 代码的执行结果
       }
   });

iOS 平台：在 iOS 平台的 Objective-C 或 Swift 代码中，可以使用stringByEvaluatingJavaScriptFromString 方法调用 JS 代码。

“`objective-c

[self.webView stringByEvaluatingJavaScriptFromString:@“myJsFunction()” completionHandler:^(NSString *result, NSError *error) {

// 处理 JS 代码的执行结果

}];

4、案例分析拍照功能示例：假设我们要在 Cordova 应用中实现拍照功能，首先需要在项目中添加摄像头插件，使用cordova plugin add cordova-plugin-camera，然后在 JavaScript 中调用摄像头插件的 API，

document.addEventListener(“deviceready”, function() {

document.getElementById(“takePhoto”).addEventListener(“click”, function() {

navigator.camera.getPicture(onSuccess, onFail, {

quality: 50,

destinationType: Camera.DestinationType.DATA_URL

});

function onSuccess(imageData) {

var image = document.getElementById(“myImage”);

image.src = “data:image/jpeg;base64,” + imageData;

}

function onFail(message) {

alert(“Failed because: ” + message);

}

});

}, false);

 在原生代码中，摄像头插件会根据平台调用相应的原生 API 来实现拍照功能，并将拍摄的照片数据返回给 JavaScript，然后在页面上显示照片。
Cordova提供了多种方式实现JS与原生代码的交互，开发者可以根据具体需求选择合适的方式进行开发。