JS 接收 android 传递过来的参数

原创

mob649e8161738c 2024-07-26 08:16:22 ©著作权

文章标签 Android 传递参数字符串 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob649e8161738c的原创作品，请联系作者获取转载授权，否则将追究法律责任

JS 接收 Android 传递过来的参数

在移动应用开发中，经常需要在 Android 和 Web 应用之间进行数据交换。本文将介绍如何使用 JavaScript（JS）接收 Android 传递过来的参数，并展示具体的代码示例。

流程图

首先，让我们通过流程图来了解整个流程：

flowchart TD
    A[Android 应用] --> B[调用 WebView]
    B --> C[WebView 加载网页]
    C --> D[网页中的 JS 接收参数]
    D --> E[处理参数]
    E --> F[显示结果或调用其他 JS 函数]

准备工作

在开始之前，确保你的 Android 应用中已经集成了 WebView 组件。WebView 是一个可以加载网页的 Android 组件。

Android 传递参数

在 Android 应用中，可以通过 WebView 的 loadUrl() 方法传递参数。这里是一个简单的示例：

WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/index.html?param1=value1&param2=value2");

在上面的代码中，我们通过 URL 的查询字符串传递了两个参数 param1 和 param2。

JS 接收参数

在网页中，我们可以使用 JavaScript 来接收这些参数。以下是接收参数的示例代码：

function getQueryParams() {
    var params = {};
    var queryString = window.location.search.substring(1);
    var vars = queryString.split('&');
    vars.forEach((pair) => {
        var keyValue = pair.split('=');
        params[keyValue[0]] = keyValue[1];
    });
    return params;
}

var params = getQueryParams();
console.log(params.param1); // 输出 value1
console.log(params.param2); // 输出 value2

在这段代码中，我们定义了一个 getQueryParams() 函数，它解析当前页面的查询字符串，并将其转换为一个对象。然后，我们可以通过对象属性访问传递过来的参数。

处理参数

接收到参数后，我们可以根据需要对参数进行处理。例如，我们可以将参数显示在页面上，或者根据参数调用其他 JavaScript 函数。

function displayParams() {
    var params = getQueryParams();
    document.getElementById('param1').innerText = params.param1;
    document.getElementById('param2').innerText = params.param2;
}

displayParams();

在上面的代码中，我们定义了一个 displayParams() 函数，它获取参数并将它们显示在页面上。