揭秘Android App与JS交互的奥秘

2023-10-20 21:23:53

前言

在移动开发领域，App与JS的交互至关重要。在本文的第一部分，我们详细介绍了iOS与JS的各种交互方式。那么，Android端的交互又是怎样的呢？接下来，就让我们一起来揭开Android App与JS交互的奥秘。

一、初始化

在Android中，App与JS的交互主要依靠WebView。WebView是一个可以显示Web内容的控件，它可以加载HTML、CSS和JavaScript代码。为了让App与JS进行交互，我们需要先初始化WebView。

WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);

二、原生调用JS

在WebView加载完成后，就可以通过WebView的loadUrl()方法来调用JS代码。例如：

webView.loadUrl("javascript:alert('Hello World!');");

当JS代码执行完成后，WebView会触发onPageFinished()方法。此时，我们可以在该方法中进行后续的操作。

@Override
public void onPageFinished(WebView view, String url) {
    // 在这里进行后续的操作
}

三、JS调用原生

为了让JS能够调用原生的方法，我们需要在WebView中注入一个JavaScriptInterface对象。JavaScriptInterface对象可以包含多个方法，这些方法可以被JS代码直接调用。

public class MyJavaScriptInterface {

    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
    }
}

webView.addJavascriptInterface(new MyJavaScriptInterface(), "Android");

四、WebViewClient

WebViewClient是一个WebView的子类，它可以监听WebView的状态变化。当WebView加载页面、加载错误或执行JS代码时，WebViewClient都会触发相应的方法。

public class MyWebViewClient extends WebViewClient {

    @Override
    public void onPageFinished(WebView view, String url) {
        // 在这里进行后续的操作
    }

    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        // 在这里处理错误
    }
}

webView.setWebViewClient(new MyWebViewClient());

五、JSBridge

JSBridge是一个第三方库，它可以简化App与JS的交互。JSBridge提供了统一的接口，使App与JS的交互更加方便。

JSBridge.register("showToast", new JSBridgeCallback() {

    @Override
    public void onCallback(String data) {
        Toast.makeText(MainActivity.this, data, Toast.LENGTH_SHORT).show();
    }
});

JSBridge.call("showAlert", "Hello World!");

六、JSON

JSON是一种数据格式，它可以表示各种数据结构。App与JS之间的数据交换可以使用JSON格式。

String json = "{ \"name\": \"John Doe\", \"age\": 30 }";

webView.loadUrl("javascript:setData('" + json + "');");

// 在JS代码中
var data = JSON.parse(window.localStorage.getItem("data"));

七、通信协议

为了使App与JS的交互更加安全可靠，我们可以定义一套通信协议。通信协议可以规定数据格式、数据加密方式等。

public class CommunicationProtocol {

    public static final String KEY_ACTION = "action";
    public static final String KEY_DATA = "data";

    public static String createMessage(String action, String data) {
        JSONObject json = new JSONObject();
        json.put(KEY_ACTION, action);
        json.put(KEY_DATA, data);
        return json.toString();
    }
}

webView.loadUrl("javascript:sendMessage('" + CommunicationProtocol.createMessage("action1", "data1") + "');");

// 在JS代码中
window.addEventListener("message", function(event) {
    var data = JSON.parse(event.data);
    if (data.action === "action1") {
        // 处理数据
    }
});