Android 给本地 H5 页面传数据（数组）

2024-03-22 23:11:29

一、介绍

在Android开发中，我们有时需要将数据从原生应用传递给H5页面。当需要传递数组类型的数据时，我们需要特殊处理。本文将向你详细介绍如何实现Android给H5传递数组的方法。

二、实现步骤

以下是实现Android给H5传递数组的流程，可以通过表格展示每个步骤：

1.创建一个WebView实例

首先，我们需要在Android应用中创建一个WebView实例，用于加载H5页面。你可以在XML布局文件中添加一个WebView控件，或者在Java代码中动态创建一个WebView实例。以下是示例代码：

WebView webView = findViewById(R.id.web_view);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true); // 开启 JavaScript 支持

2.创建数据提供子类

类中的方法可以在 JS 中调用，获取数据。

class TestDataProvider {

    public TestDataProvider() {

    }

    @JavascriptInterface
    public String getLocalData() {
        // 返回本地数据
        return "Hello from local data!333";
    }

    @JavascriptInterface
    public String getLocalArray() {
        // 返回本地数据
        String[][] arr  = new String[][]{
                {"a", "b","c","d","e","f"},
                {"a", "b","c","d","e","f"},
                {"a", "b","c","d","e","f"},
                {"a", "b","c","d","e","f"},
                {"a", "b","c","d","e","f"}
        };
        return XcApplication.gson.toJson(arr);
    }
}

3.注入JS接口

接下来，我们需要在WebView中注入一个JS接口，用于在H5页面中调用原生代码。通过WebView的addJavascriptInterface()方法可以实现这一功能。以下是示例代码：

TestDataProvider dataProvider = new TestDataProvider();
webView.addJavascriptInterface(dataProvider, "dataProvider");

String htmlFilePath = "file:///android_asset/web/inj_test_data.html";
webView.loadUrl(htmlFilePath);

4.将JSON字符串传递给H5页面

为了将JSON字符串传递给H5页面，可以将 JSON 字符串赋值给 H5 页面的一个变量。再通过 JSON.parse() 函数，将 JSON 字符串解析为 JavaScript 对象或数组。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试数据（Test Data）</title>
    <link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.min.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            var jsonArray = JSON.parse(window.dataProvider.getLocalArray());
             $('#tb').DataTable({
                data: jsonArray,
                columns: [
                    { title: "测试点" },
                    { title: "轨压名称" },
                    { title: "脉宽" },
                    { title: "油量标准值" },
                    { title: "油量最大值" },
                    { title: "油量最小值" }
                ]
             });
        });
    </script>
</head>
<body>
<div id="data">
    <table id="tb">
    </table>
</div>
</body>
</html>