Android webview与js交换JSON对象数据示例

为了让大家更好地理解“Android webview与js交换JSON对象数据”的过程，我将详细讲解一下：

1. 什么是Android WebView

Android WebView是一个使用Android内置WebKit引擎实现的组件，可以让开发者在Android应用程序中嵌入Web页面。 它提供了多种方法来加载HTML内容，包括从Web服务器加载内容，也可以使用本地应用的资源或从文件系统加载。在Android中，WebView可被认为是一个将HTML页面显示在Android应用程序上的一个控件。

2. Android WebView与JS交换JSON对象数据示例

下面通过两个示例说明，如何在Android中使用WebView与JS交换JSON对象数据。

示例一：Android WebView向JS发送JSON对象数据

// 在 Kotlin 中为 WebView 启用 JavaScript
webView.settings.javaScriptEnabled = true

// 定义需要发送的 JSON 数据
val json = "{ \"name\":\"张三\", \"age\":18 }"

// 加载包含 JS 的 HTML 文件
webView.loadUrl("file:///android_asset/index.html")

//等待页面加载完成后，向JS发送 JSON 数据
webView.webViewClient = object : WebViewClient() {
    override fun onPageFinished(view: WebView?, url: String?) {
        super.onPageFinished(view, url)
        webView.loadUrl("javascript:receiveJson('" + json + "')")
    }
}

在这个示例中，我们需要向一个包含 JS 的 HTML 文件发送一个 JSON 对象。通过在 Kotlin 代码中启用JavaScript，并加载包含 JS 的 HTML 文件，然后在页面加载完成后，使用 loadUrl() 方法向JS发送JSON数据，其中“javascript:”表示JS代码的标识符，接下来是JS函数的名称以及需要传输给函数的JSON数据。

接收JSON数据的JS函数如下所示：

function receiveJson(json) {
  var obj = JSON.parse(json);
  console.log(obj.name);
  console.log(obj.age);
}

示例二：JS向Android WebView发送JSON数据

// 使用 JavaScript 向 WebView 发送 JSON 数据
const json = { name: "李四", age: 20 };
window.androidBridge && window.androidBridge.receiveJson(JSON.stringify(json));

在这个示例中，我们需要使用JS来向Android WebView发送一个JSON对象。使用 JSON.stringify 方法将JSON对象转换为字符串，然后通过调用Java代码中名为receiveJson的方法，将JSON数据传递到Android side的代码中，示例如下：

// 包含 receiveJson 方法的类
class WebAppInterface(private val mContext: Context) {
    @JavascriptInterface
    fun receiveJson(json: String) {
        val jsonObject = JSONObject(json)

        // 打印JSON数据
        Log.d("Android", jsonObject.toString())

        // 显示 JSON 数据
        AlertDialog.Builder(mContext)
            .setTitle("收到json数据")
            .setMessage(jsonObject.toString())
            .setPositiveButton(android.R.string.ok, null)
            .show()
    }
}

// 在创建 WebView 时为其添加 JS 接口
webView.addJavascriptInterface(WebAppInterface(this), "androidBridge")

在这个示例中，我们在Java代码中创建一个名为WebAppInterface的类，并在其构造方法中接收一个Context参数。这个类包含一个名为receiveJson的方法，它被用来在收到JSON数据时将其解析到一个名为JSONObject的对象中。 在使用WebView时，我们通过为WebView对象添加一个JavaScript接口（webView.addJavascriptInterface()）来实现JS与Java之间的通信。最后，我们调用AlertDialog.Builder来显示接收到的JSON数据。

结语

通过本文的讲解，相信你已经了解了如何在Android中使用WebView与JS交换JSON对象数据。这对于那些想要将Web页面嵌入到Android应用程序中的开发人员非常有用。