JavaScriptInterface 传递 JSONObject

1. 简介

在开发 Android 应用时，经常会需要在 Java 代码和 JavaScript 代码之间进行数据传递。Android 提供了一个叫做 JavaScriptInterface 的类，可以方便地在 Java 代码和 JavaScript 代码之间传递数据。本文将介绍如何使用 JavaScriptInterface 来传递 JSONObject 数据类型。

2. JavaScriptInterface 简介

JavaScriptInterface 是 Android 提供的一个类，它允许我们在 Java 代码和 JavaScript 代码之间建立桥梁。通过在 Java 代码中创建一个类，并使用 @JavascriptInterface 注解来标记方法，我们可以将这个类的实例传递给 WebView，从而在 JavaScript 代码中调用 Java 代码中的方法。

3. 传递 JSONObject

在 Android 开发中，JSONObject 是常用的数据类型之一，它可以用来表示一个 JSON 对象。如果我们需要在 Java 代码和 JavaScript 代码之间传递 JSONObject，我们可以通过将 JSONObject 转换成字符串，然后在 Java 代码和 JavaScript 代码之间通过字符串传递数据。

下面是一个示例代码，演示了如何通过 JavaScriptInterface 传递 JSONObject：

public class MainActivity extends AppCompatActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.web_view);

        // 启用 JavaScript
        webView.getSettings().setJavaScriptEnabled(true);

        // 创建一个 JavaScriptInterface 对象
        MyJavaScriptInterface jsInterface = new MyJavaScriptInterface();

        // 将 JavaScriptInterface 对象传递给 WebView
        webView.addJavascriptInterface(jsInterface, "Android");

        // 加载 HTML 文件
        webView.loadUrl("file:///android_asset/index.html");
    }

    public class MyJavaScriptInterface {

        @JavascriptInterface
        public void passJSONObject(String jsonObjectString) {
            try {
                // 将接收到的字符串转换成 JSONObject
                JSONObject jsonObject = new JSONObject(jsonObjectString);

                // 在这里可以对 JSONObject 进行操作
                String name = jsonObject.getString("name");
                int age = jsonObject.getInt("age");
                Log.d("TAG", "name: " + name);
                Log.d("TAG", "age: " + age);
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }
    }
}

在上面的代码中，我们创建了一个 MainActivity 类，并在其中创建了一个 MyJavaScriptInterface 类。MyJavaScriptInterface 类有一个 passJSONObject 方法，用来从 JavaScript 代码接收 JSONObject。在这个方法中，我们将接收到的字符串转换成 JSONObject，然后可以对其进行操作。

在 HTML 文件中，我们可以通过 window.Android.passJSONObject(jsonObjectString) 来调用 passJSONObject 方法，其中 jsonObjectString 是将 JSONObject 转换成字符串后的结果。

下面是一个 HTML 文件的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScriptInterface Demo</title>
    <script>
        function sendData() {
            var jsonObject = {
                name: "张三",
                age: 18
            };

            // 将 JSONObject 转换成字符串，并传递给 Java 代码
            var jsonObjectString = JSON.stringify(jsonObject);
            window.Android.passJSONObject(jsonObjectString);
        }
    </script>
</head>
<body>
    <button onclick="sendData()">传递 JSONObject</button>
</body>
</html>

在上面的示例代码中，我们在 JavaScript 中创建了一个名为 sendData 的方法。在这个方法中，我们创建了一个 JSONObject 对象，并将其转换成字符串。然后，我们通过 window.Android.passJSONObject(jsonObjectString) 调用了 Java 代码中的 passJSONObject 方法，并传递了 JSONObject 字符串。

4. 类图

下面是本文中涉及到的类的类图：

classDiagram
    class MainActivity{
        -WebView webView
        +void onCreate(Bundle savedInstanceState)
    }
    class MyJavaScriptInterface{
        +void passJSONObject(String jsonObjectString)
    }
    MainActivity "1" *-- "1" MyJavaScriptInterface

在上面的类图中，我们可以看到 MainActivity 和 MyJavaScriptInterface 之间的关系。MainActivity 类包含了一个 WebView 对象，并且实例化了一个 MyJavaScriptInterface 对象，并将其传递给 WebView。

5. 序列