Android 调用 JS 接收返回值的实现

在移动应用开发中，经常会遇到需要在 Android 应用中调用 JavaScript 函数的情况，同时需要接收 JavaScript 函数的返回值。本文将介绍如何实现 Android 调用 JS 并接收返回值的方法，并提供相应的代码示例。

实现步骤

1. 准备 WebView

首先，需要在 Android 应用中使用 WebView 控件加载包含 JavaScript 函数的网页。在 XML 布局文件中添加 WebView 控件：

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

2. 调用 JavaScript 函数

在 Android 中调用 JavaScript 函数可以使用 evaluateJavascript 方法。通过 WebView 的 evaluateJavascript 方法传递 JavaScript 代码并接收返回值：

WebView webView = findViewById(R.id.webview);
webView.evaluateJavascript("javascript:functionName()", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        // 处理 JavaScript 函数的返回值
    }
});

3. JavaScript 返回值处理

在 JavaScript 函数中，可以通过 window.prompt 方法返回数值。Android 应用通过重写 WebViewClient 的 shouldOverrideUrlLoading 方法来处理 JavaScript 返回值：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (url.startsWith("jsreturn:")) {
            String value = url.replace("jsreturn:", "");
            // 处理 JavaScript 返回值
            return true;
        }
        return super.shouldOverrideUrlLoading(view, url);
    }
});

代码示例

下面是一个简单的示例，演示了如何在 Android 应用中调用 JavaScript 函数并接收返回值：

WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (url.startsWith("jsreturn:")) {
            String value = url.replace("jsreturn:", "");
            // 处理 JavaScript 返回值
            return true;
        }
        return super.shouldOverrideUrlLoading(view, url);
    }
});
webView.loadUrl("file:///android_asset/index.html");

webView.evaluateJavascript("javascript:functionName()", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        // 处理 JavaScript 函数的返回值
    }
});

应用场景

  • 在实现某些功能时，需要通过 JavaScript 函数返回值来更新 Android 应用的界面。
  • 在移动应用和网页交互时，需要实现 Android 应用调用网页中的 JavaScript 函数并接收返回值。

通过上述方法，可以实现 Android 调用 JavaScript 函数并接收返回值的功能，实现了 Android 应用和 JavaScript 之间的交互。

旅行图

journey
    title Android 调用 JS 接收返回值的实现
    section 准备 WebView
        Android 应用加载 WebView 控件
    section 调用 JavaScript 函数
        Android 调用 JavaScript 函数
    section JavaScript 返回值处理
        处理 JavaScript 函数的返回值

甘特图

gantt
    title Android 调用 JS 接收返回值的实现时间表
    dateFormat  YYYY-MM-DD
    section 准备工作
    准备 WebView          :done,    des1, 2022-03-01, 4d
    section 开发阶段
    调用 JavaScript 函数    :active,  des2, after des1, 5d
    JavaScript 返回值处理   :         des3, after des2, 3d

结语

通过本文的介绍，您已经了解了在 Android 应用中调用 JavaScript 函数并接收返回值的方法。希望本文对您有所帮助，祝您在移动应用开发中取得成功！