如何在Cordova H5应用中高效调用JavaScript？

Cordova H5调用JS的几种方法：通过插件调用JS代码、使用事件监听器、利用WebView通信接口等，实现原生与JS交互。

在Cordova H5中调用JS代码，通常涉及到与原生代码的交互，以下是详细的步骤和示例：

一、通过插件调用JS

1、定义插件：首先需要在原生端定义一个插件，继承自CDVPlugin类，并实现相应的方法，在Android平台上，创建一个名为Adder的插件，其对应的Java类为Adder，并在其中实现一个名为performAdd的方法。

2、注册插件：在config.xml文件中注册该插件，指定插件的名称和对应的Java类名。<plugin name="Adder" value="com.example.plugin.Adder"/>。

3、在H5中调用插件：在H5页面中，通过cordova.exec函数来调用插件，需要传入服务类名、方法名以及回调函数和参数等。

cordova.exec(successCallback, errorCallback, "Adder", "performAdd", [param1, param2]);

successCallback是成功时的回调函数，errorCallback是失败时的回调函数，"Adder"是插件的名称，"performAdd"是插件中要调用的方法名，[param1, param2]是传递给插件方法的参数数组。

二、直接在WebView中加载JS文件

1、将JS文件放在合适的位置：可以将需要调用的JS文件放在项目的www目录下，确保H5页面能够正确引用到该JS文件。

2、在H5页面中引用JS文件：在H5页面的HTML代码中，使用<script>标签引入JS文件。

<script src="path/to/your/jsfile.js"></script>

这样就可以在H5页面中直接使用JS文件中定义的函数和变量等。

三、通过自定义URL协议调用JS

1、配置自定义URL协议：在config.xml文件中添加对自定义URL协议的支持，<allow-intent href="http://*/*"/><allow-intent href="https://*/*"/><access origin="*"/>。

2、拦截URL请求：在原生端的WebViewClient中拦截自定义URL协议的请求，并根据请求的URL执行相应的操作，包括调用JS代码，在Android平台上，可以在SystemWebViewClient.java文件中重写shouldInterceptRequest方法来实现拦截。

3、在H5中触发自定义URL请求：在H5页面中，通过JavaScript代码触发自定义URL请求，

window.location.href = "myprotocol://myaction?param1=value1&param2=value2";

当H5页面触发这个自定义URL请求时，原生端会拦截到该请求，并执行相应的操作。

四、通过Prompt/Confirm对话框与JS交互

1、显示对话框：在原生端通过prompt或confirm方法显示对话框，并传递消息给H5页面，在Android平台上，可以使用cordova.getActivity().runOnUiThread方法在主线程上显示对话框。

2、处理对话框结果：在H5页面中，通过监听onPrompt或onConfirm事件来处理对话框的结果。

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

document.addEventListener(‘onPrompt’, onPrompt, false);

}

function onPrompt(event) {

var result = prompt(event.message);

if (result !== null) {

event.callback(result);

}

}

五、通过Custom URL Scheme调用JS

1、配置白名单：在config.xml文件中配置白名单，允许加载特定的URL。<access origin="http://localhost:8080/*"/>。

2、监听Custom URL Scheme：在原生端监听Custom URL Scheme，并在接收到请求时执行相应的操作，在Android平台上，可以在MainActivity.java文件中重写onNewIntent方法来处理接收到的Intent。

3、在H5中触发Custom URL Scheme请求：在H5页面中，通过JavaScript代码触发Custom URL Scheme请求。

window.location.href = "myapp://myaction?param1=value1&param2=value2";

当H5页面触发这个请求时，原生端会接收到请求，并执行相应的操作。

六、通过JNI调用JS

1、创建JNI接口：在原生端创建JNI接口，以便能够在C++层调用Java方法，这通常涉及到编写一些C++代码来定义接口和实现方法。

2、在C++层调用Java方法：在C++层通过JNI接口调用Java方法，并传递必要的参数，这通常涉及到使用env->CallVoidMethod或类似的JNI函数来调用Java方法。

3、在Java层调用JS代码：在Java层接收到C++层的调用后，通过webView.loadUrl或类似的方法来调用JS代码。

webView.loadUrl("javascript:myFunction(‘param1’, ‘param2’)");

这样就可以在Java层调用H5页面中的JS函数了。

Cordova H5调用JS有多种方式，包括通过插件、直接加载JS文件、自定义URL协议、Prompt/Confirm对话框、Custom URL Scheme以及JNI等，开发者可以根据具体的需求和场景选择合适的方式来实现H5与原生代码之间的交互。