Android js 回调

Android JS 回调详解

在Android开发中，我们经常需要与前端进行交互，特别是在Webview中嵌入页面时。其中，前端通过JavaScript调用Android的方法，而Android则需要通过回调的方式将结果传递给前端。

本文将详细介绍Android中使用JS回调的过程，包括如何注册回调方法、如何在JavaScript中调用Android方法以及如何将结果传递给前端。

1. 注册回调方法

首先，在Android中需要注册一个回调方法，以便JavaScript能够调用。我们可以使用addJavascriptInterface方法将一个Java对象注入到WebView中，然后在该Java对象中定义回调方法。

// 1. 创建一个Java对象，用于回调
public class JavaScriptInterface {
    private MyCallbackListener listener;

    public void setCallbackListener(MyCallbackListener listener) {
        this.listener = listener;
    }

    // 2. 定义回调方法
    @JavascriptInterface
    public void callback(String data) {
        if (listener != null) {
            listener.onCallback(data);
        }
    }

    // 3. 定义回调接口
    public interface MyCallbackListener {
        void onCallback(String data);
    }
}

// 4. 在Activity中注册回调对象
webView.addJavascriptInterface(new JavaScriptInterface(), "Android");

上述代码中，我们创建了一个JavaScriptInterface类，其中定义了一个回调方法callback和一个回调接口MyCallbackListener。在Activity中，我们将该对象通过addJavascriptInterface方法注入到WebView中，并指定了一个名称"Android"，以便在JavaScript中调用。

2. 在JavaScript中调用Android方法

一旦我们将Java对象注入到WebView中，JavaScript就可以使用window.Android来调用Android方法了。下面是一个例子，通过JavaScript调用Android的callNative方法，并传递一个参数。

// 1. 在JavaScript中调用Android方法
window.Android.callNative("Hello, Android!");

那么，在Android中我们应该如何接收这个调用，并执行相应的操作呢？这就需要用到@JavascriptInterface注解和我们之前注册的回调方法了。

// 2. 在Java中接收JavaScript的调用
@JavascriptInterface
public void callNative(String message) {
    // 处理传递过来的参数
    Log.d(TAG, "Received message from JavaScript: " + message);

    // 执行相应的操作

    // 3. 调用回调方法将结果传递给前端
    if (callbackListener != null) {
        callbackListener.callback("Hello, JavaScript!");
    }
}

上述代码中，我们使用@JavascriptInterface注解标注了callNative方法，以便JavaScript能够调用。在该方法中，我们可以处理传递过来的参数，并执行相应的操作。最后，我们调用回调方法callback，将结果传递给前端。

3. 将结果传递给前端

在回调方法中，我们可以通过之前定义的回调接口MyCallbackListener将结果传递给前端。下面是一个例子，展示了在回调方法中触发回调接口，并将结果传递给前端。

public class JavaScriptInterface {
    private MyCallbackListener listener;

    public void setCallbackListener(MyCallbackListener listener) {
        this.listener = listener;
    }

    @JavascriptInterface
    public void callback(String data) {
        if (listener != null) {
            listener.onCallback(data);
        }
    }

    public interface MyCallbackListener {
        void onCallback(String data);
    }
}

在该例子中，我们通过调用listener.onCallback(data)触发回调接口，并将结果data传递给前端。

序列图

下面是一个基于mermaid语法的序列图，展示了Android JS回调的整个过程。

sequenceDiagram
    participant Android
    participant JavaScript
    participant WebView

    activate Android
    activate JavaScript
    activate WebView

    Android->>WebView: addJavascriptInterface
    activate JavaScriptInterface

    loop 监听回调
        JavaScript->>Android: callNative
        Android->>JavaScriptInterface: callNative
        JavaScriptInterface->>JavaScript: callback
    end

    JavaScriptInterface->>Android: callback
    Android->>JavaScript: MyCallbackListener.onCallback
    JavaScript->>WebView: 接收回调结果

    deactivate Android
    deactivate JavaScript
    deactivate WebView