cordova h5 调用js

在Cordova应用中，H5调用JS主要有以下几种方式：

1、通过插件调用JS代码

创建Cordova插件

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

使用命令行工具创建插件：可以使用cordova plugin create <plugin-name> --id <plugin-id> --plugin-version <version>命令自动生成插件的基本结构，然后在此基础上进行修改和扩展。

编写原生代码

以Android平台为例（Java实现）：在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代码。

2、使用事件监听器

设备就绪事件

添加事件监听器：在JavaScript中使用document.addEventListener("deviceready", onDeviceReady, false);添加设备就绪事件的监听器。

编写事件处理函数：当设备准备完毕并且Cordova已经完全加载时，会触发该事件，在事件处理函数onDeviceReady中编写设备准备完毕后要执行的代码。

自定义事件

创建自定义事件：在原生代码中创建自定义事件，例如在Java代码中：

        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方法触发自定义事件，并传递事件数据到JS代码中。

3、利用WebView通信接口

Java实现：在Java代码中使用evaluateJavascript方法调用JS代码，并获取其执行结果。

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

处理执行结果：在onReceiveValue方法中处理JS代码的执行结果。

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

1、如何在Cordova应用中让远程H5页面调用本地JS？

解答：一种方法是将所有JS文件上传到服务器，然后在H5页面中引用这些JS文件，另一种方法是通过拦截WebView请求加载本地JS，即修改SystemWebViewClient.java文件，在shouldInterceptRequest方法中判断请求URL是否包含特定标识（如“http://injection/”），如果是则从本地资产文件夹中加载对应的JS文件并返回响应。

2、Cordova H5调用JS时，如何传递参数给JS函数？

解答：可以通过多种方式传递参数，如果使用插件调用JS代码，可以在原生代码中将参数封装成JSON格式，传递给插件的执行方法，然后在插件的JS部分接收并解析这些参数，如果使用事件监听器触发自定义事件，可以将参数作为事件数据的一部分传递给JS代码，如果使用WebView通信接口的evaluateJavascript方法调用JS代码，也可以在JS函数中直接接收参数。

小编有话说：Cordova为H5与原生代码之间的交互提供了多种灵活的方式，开发者可以根据自己的需求选择合适的方法来实现H5调用JS的功能，在实际开发中，需要仔细考虑各种方式的优缺点，以及不同平台的差异，确保应用的稳定性和性能，随着技术的不断发展，也建议关注Cordova的最新动态和相关文档，以便更好地利用其功能进行开发。