cordova 原生调用js

在Cordova应用开发中，原生代码与JavaScript的交互是一个常见且重要的需求，这种交互方式使得开发者能够利用原生平台的功能来增强Web应用的性能和用户体验，下面将详细介绍Cordova原生调用JS的几种方法，包括通过插件调用JS代码、使用事件监听器以及利用WebView通信接口等方式，并结合具体案例进行说明。

一、通过插件调用JS代码

1、创建Cordova插件：

Cordova插件通常包含plugin.xml（配置文件）、src目录（存放原生代码）和www目录（存放JavaScript代码）。

使用Cordova的命令行工具创建插件：cordova plugin create <plugin-name> --id <plugin-id> --plugin-version <version>。

2、编写原生代码：

以Android平台为例，在src/android目录下创建一个Java类，继承自CordovaPlugin类。

重写execute方法作为插件的入口方法，当JS代码调用插件接口时会执行此方法。

在execute方法中，根据传入的action参数判断需要执行的具体业务逻辑，并通过webView.loadUrl方法调用JS代码。

3、示例代码：

 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();
       }
   }

4、调用插件：

在JavaScript代码中，通过cordova.exec方法调用原生插件。

 cordova.exec(
       function(response) { console.log("Response from Java: " + response); },
       function(error) { console.error("Error: " + error); },
       "MyPlugin", // 插件的名称
       "myAction", // 方法名
       [] // 参数数组
     );

二、使用事件监听器

1、设备就绪事件：

设备就绪事件（deviceready）是Cordova最常用的事件之一，当设备准备完毕并且Cordova已经完全加载时会触发此事件。

在JavaScript代码中添加事件监听器：

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

2、自定义事件：

开发者还可以自定义事件，并在原生代码中触发这些事件。

在原生代码中创建自定义事件并触发：

 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("myCustomEvent", function(e) {
       var data = e.detail;
       console.log("Received custom event with data: " + data);
     });

三、利用WebView通信接口

1、Java实现：

在Android平台上，可以通过evaluateJavascript方法直接调用JS代码，并获取其执行结果。

 webView.evaluateJavascript("myJsFunction()", new ValueCallback<String>() {
       @Override
       public void onReceiveValue(String value) {
         // 处理JS代码的执行结果
         System.out.println("Result from JS: " + value);
       }
     });

四、案例分析：本地通知插件调用JS方法

1、原生代码：

在本地通知的广播接收中调用handlingNotificationOpen函数。

handlingNotificationOpen函数中调用transmitNotificationOpen全局函数。

transmitNotificationOpen函数中使用cordovaActivity.runOnUiThread确保在UI线程中执行，并通过webView.loadUrl方法调用JS代码。

 private void handlingNotificationOpen(Context context, Bundle bundle) {
       Log.i(TAG, "--------------- handlingNotificationOpen");
       AlarmClockCordova.transmitNotificationOpen();
       Intent launch = context.getPackageManager().getLaunchIntentForPackage(context.getPackageName());
       launch.addCategory(Intent.CATEGORY_LAUNCHER);
       launch.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_SINGLE_TOP);
       context.startActivity(launch);
     }
     public static void transmitNotificationOpen() {
       if (instance == null) {
         return;
       }
       final String format = "window.plugins.alarmClock.openNotificationInAndroidCallback();";
       cordovaActivity.runOnUiThread(new Runnable() {
         @Override
         public void run() {
           instance.webView.loadUrl("javascript:" + format);
         }
       });
     }

2、JS代码：

定义一个名为AlarmClock的对象，并在其中定义openNotificationInAndroidCallback方法。

 function AlarmClock() {}
     AlarmClock.prototype.openNotificationInAndroidCallback = function () {
       alert("提醒下!");
     };
     if (!window.plugins) {
       window.plugins = {};
     }
     if (!window.plugins.alarmClock) {
       window.plugins.alarmClock = new AlarmClock();
     }

五、FAQs

1、Q: 如何在Vue项目中引用Cordova原生JS？

A: 在Vue项目中引用Cordova原生JS的步骤如下：首先安装Cordova并创建新项目；然后添加需要的移动平台（如Android或iOS）；接着根据需要添加Cordova插件；最后在Vue项目的main.js中引入Cordova，并使用Vue-Cordova插件简化集成过程。

2、Q: Cordova原生与JS交互的流程是怎样的？

A: Cordova原生与JS交互的流程主要包括创建新的Cordova项目、添加目标平台（如Android）、编写原生插件代码、在原生代码中处理JavaScript调用、在JavaScript中调用原生插件以及测试和调试应用。

六、小编有话说

Cordova原生调用JS的方法多种多样，开发者可以根据自己的需求选择合适的方式，通过插件调用JS代码是最常见和灵活的方式，它能够让我们在原生代码中直接执行JavaScript代码，实现与WebView内容的深度交互，使用事件监听器和WebView通信接口也是有效的交互方式，在实际开发中，建议开发者根据项目的具体需求和平台特性选择合适的交互方式，并遵循Cordova的开发规范和最佳实践进行开发。