cordova 调用js

Cordova 是一个开源的移动应用开发框架，它允许开发者使用 HTML、CSS 和 JavaScript 构建跨平台的移动应用，在 Cordova 中调用 JS（JavaScript）主要有以下几种方式：

1、通过插件调用 JS 代码

创建 Cordova 插件：

一个 Cordova 插件通常包含plugin.xml（插件的配置文件，定义插件的基本信息、依赖关系和接口）、src 目录（存放原生代码，如 Java、Swift 等的目录）以及www 目录（存放 JavaScript 代码的目录），可以使用cordova plugin create <plugin-name> --id <plugin-id> --plugin-version <version> 命令自动生成插件的基本结构，然后在此基础上进行修改和扩展。

编写原生代码：

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

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

这里的execute 方法是插件的入口方法，当 JS 代码调用插件接口时，会执行此方法。myAction 方法中实现了具体的业务逻辑，并通过webView.loadUrl 方法调用 JS 代码。

在 JavaScript 中调用插件：

在www/js/index.js 文件中，可以编写 JavaScript 代码来调用本地方法。

 document.addEventListener('deviceready', function() {
            // 设备信息
            var deviceInfo = "Device: " + device.model + ", Platform: " + device.platform;
            console.log(deviceInfo);
            // 调用自定义函数
            customNativeFunction(deviceInfo);
        }, false);
        function customNativeFunction(deviceInfo) {
            // 调用本地方法
            window.NativeInterface.callJavaMethod(deviceInfo);
        }

2、使用事件监听器

设备就绪事件：

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

自定义事件：

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

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

在上述代码中，通过cordova.fireDocumentEvent 方法触发自定义事件，并传递事件数据。

3、利用 WebView 通信接口

Java 实现：

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

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

通过上述方法，可以实现原生代码与 JS 代码的双向通信。

以下是两个关于 Cordova 调用 JS 的常见问题及解答：

1、如何在 Cordova 中创建一个自定义插件并调用 JS 代码？

使用cordova plugin create 命令创建一个新的插件，然后在插件的src 目录下编写原生代码（如 Java、Swift 等），实现具体的业务逻辑和交互效果，在原生代码中，通过webView.loadUrl 方法调用 JS 代码，在 JavaScript 文件中，通过插件名调用原生方法。

在 Java 端创建一个名为MyPlugin 的插件，并在execute 方法中根据传入的action 参数判断是否执行自定义的myAction 方法，在myAction 方法中通过webView.loadUrl 调用 JS 代码javascript:myJsFunction()，在 JavaScript 端，使用window.MyPlugin.myAction() 来调用原生插件中的myAction 方法。

2、Cordova 中的deviceready 事件有什么作用？如何使用它来调用 JS 代码？

deviceready 事件是 Cordova 最常用的事件之一，当设备准备完毕并且 Cordova 已经完全加载时，会触发此事件，它可以确保在设备准备好之后才执行相关的代码，避免在一些设备还未完全初始化完成时就尝试调用设备相关功能而导致的错误，在 JavaScript 中，使用document.addEventListener("deviceready", onDeviceReady, false); 来监听该事件，并在回调函数onDeviceReady 中编写设备准备完毕后需要执行的代码，包括调用其他函数或执行特定的操作。

 document.addEventListener('deviceready', function() {
         // 设备信息
         var deviceInfo = "Device: " + device.model + ", Platform: " + device.platform;
         console.log(deviceInfo);
         // 调用自定义函数
         customNativeFunction(deviceInfo);
     }, false);

在上述代码中，当deviceready 事件触发后，会先获取设备信息并打印到控制台，然后调用自定义的customNativeFunction 函数。

小编有话说：Cordova 为开发者提供了多种灵活的方式来实现原生代码与 JavaScript 之间的交互，通过合理运用插件、事件监听器和 WebView 通信接口等方法，能够开发出功能强大且用户体验良好的跨平台移动应用，在实际开发过程中，开发者需要根据具体的需求和项目情况选择合适的调用方式，以确保应用的稳定性和性能。