如何在Android应用中实现数据传递给JavaScript？

在Android中，可以通过WebView的addJavascriptInterface方法将数据传递给JavaScript。

Android传数据给JS

在现代移动应用开发中，原生应用与JavaScript之间的交互变得越来越重要，特别是在混合开发（Hybrid Development）场景下，Android原生代码与Web前端的通信是实现复杂功能的关键，本文将详细介绍如何在Android应用中将数据传递给JavaScript，并提供相关示例和表格说明。

使用WebView加载网页

我们需要在Android应用中使用WebView来加载一个包含JavaScript的网页。WebView是一个强大的视图组件，可以显示网页内容并允许与JavaScript进行交互。

示例代码

import android.os.Bundle;
import android.webkit.WebView;
import androidx.appcompat.app.AppCompatActivity;
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.webview);
        // 启用JavaScript支持
        webView.getSettings().setJavaScriptEnabled(true);
        // 加载网页
        webView.loadUrl("file:///android_asset/index.html");
    }
}

在上述代码中，我们启用了WebView的JavaScript支持，并加载了一个本地的HTML文件（位于assets目录下）。

2. 通过WebView的addJavascriptInterface方法传递数据

WebView提供了一个名为addJavascriptInterface的方法，可以将Java对象暴露给JavaScript，从而实现双向交互，我们可以利用这个方法将数据从Android传递到JavaScript。

示例代码

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.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/index.html");
        // 创建Java对象并暴露给JavaScript
        webView.addJavascriptInterface(new WebAppInterface(), "Android");
    }
    // 定义一个内部类，用于与JavaScript交互
    public class WebAppInterface {
        @JavascriptInterface
        public String getDataFromAndroid() {
            return "Hello from Android!";
        }
    }
}

在上述代码中，我们创建了一个名为WebAppInterface的内部类，并在其中定义了一个方法getDataFromAndroid，通过调用addJavascriptInterface方法，我们将这个Java对象暴露给JavaScript，使其可以通过window.Android.getDataFromAndroid()来调用此方法。

3. 在JavaScript中调用Android传递的数据

在HTML文件中，我们可以编写如下JavaScript代码来调用Android传递的数据：

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1 id="content">Loading...</h1>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            // 调用Android传递的数据
            var dataFromAndroid = window.Android.getDataFromAndroid();
            document.getElementById("content").innerText = dataFromAndroid;
        });
    </script>
</body>
</html>

在这个示例中，当网页加载完成后，JavaScript会调用window.Android.getDataFromAndroid()方法获取来自Android的数据，并将其显示在页面上。

4. 使用Intent传递数据给WebView中的JavaScript

除了直接通过addJavascriptInterface方法传递数据外，我们还可以使用Intent来传递数据，然后在WebView中接收这些数据，这种方法适用于需要动态传递数据的场景。

示例代码

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.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/index.html");
        // 创建一个Intent，包含要传递的数据
        Intent intent = new Intent(this, MainActivity.class);
        intent.putExtra("data", "Hello from Intent!");
        startActivity(intent);
    }
}

在上述代码中，我们创建了一个Intent，并通过putExtra方法将数据添加到Intent中，然后在WebView加载完成后，我们可以在JavaScript中接收这些数据。

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1 id="content">Loading...</h1>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            // 获取Intent传递的数据
            var intentData = window.androidIntentData;
            if (intentData) {
                document.getElementById("content").innerText = intentData;
            } else {
                document.getElementById("content").innerText = "No data received";
            }
        });
    </script>
</body>
</html>

在这个示例中，我们在JavaScript中使用全局变量window.androidIntentData来接收Intent传递的数据，并将其显示在页面上，需要注意的是，这种方式需要在WebViewClient中处理Intent数据的传递。

方法	描述	优点	缺点
addJavascriptInterface	通过Java对象暴露接口给JavaScript	简单直接，易于实现	安全性较低，需要小心处理
Intent	通过Intent传递数据给WebView中的JavaScript	动态传递数据，灵活性高	需要处理Intent数据的传递
URL参数	通过URL参数传递数据给WebView中的JavaScript	简单易用，适合静态数据	不适用于大量或敏感数据
WebSocket	通过WebSocket实现实时双向通信	实时性强，适合频繁数据交互	实现复杂，需要额外配置