Android 给本地 H5 页面传数据(数组)
一、 介绍
在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>