如何在Cordova中实现JavaScript调用？

Cordova 调用 JS 是指通过 Cordova 框架实现原生应用与 JavaScript 代码之间的交互。

在Cordova开发中，调用JS代码有多种方式，以下是详细内容：

通过插件调用JS代码

创建Cordova插件：使用cordova plugin create <plugin-name> --id <plugin-id> --plugin-version <version>命令创建插件，该命令会自动生成包含plugin.xml、src目录和www目录的基本结构。

编写原生代码：以Android平台为例，在src/android目录下的Java类继承自CordovaPlugin类，在execute方法中判断action是否匹配要执行的操作，若匹配则调用相应的方法。

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中调用插件：在www/js目录下的JavaScript文件中，通过cordova.exec方法调用插件的接口。

document.addEventListener('deviceready', function () {
    cordova.exec(function (result) {
        console.log("Success: " + result);
    }, function (error) {
        console.error("Error: " + error);
    }, "MyPlugin", "myAction", []);
}, false);

使用事件监听器

设备就绪事件：当设备准备完毕并且Cordova已经完全加载时，会触发deviceready事件，在JavaScript中可以通过以下代码监听该事件：

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

自定义事件：可以在原生代码中触发自定义事件，并在JavaScript中监听这些事件。

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);
        webView.loadUrl(jsCode);
        callbackContext.success();
    }}

在JavaScript中监听自定义事件：

document.addEventListener("myCustomEvent", function (e) {
    console.log("Custom event received with data: " + e.detail);
}, false);

利用WebView通信接口

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

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

案例分析

创建Cordova项目：使用cordova create MyApp com.example.myapp MyApp命令创建一个新的Cordova项目，然后使用cd MyApp命令进入项目目录，再使用cordova platform add android命令添加Android平台。

添加插件：为了更好地演示方法调用，可以添加一个示例插件，如cordova plugin add cordova-plugin-device。

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

编写Java代码：在src/android目录下创建NativeInterface.java文件，实现在本地调用JavaScript方法的接口。

在config.xml中注册插件：修改config.xml文件，添加以下代码注册新创建的插件：

<plugin name="NativeInterface" value="com.example.myapp.NativeInterface" />

构建项目并运行：使用cordova build android命令构建项目，然后使用cordova run android命令运行项目。