Android WebView如何高效传递参数？

虽然我的专长是机械维修，但内容策划的逻辑是相通的：精准定位用户痛点 -> 提供结构化、可落地的解决方案 -> 优化关键词布局和可读性 -> 引导用户完成目标行为。

以下是我为您精心创作的文章：

Android WebView传递参数终极指南：从基础到跨域通信，一篇搞定！

** 还在为WebView与H5页面的数据交互抓狂？本文详解5大核心方法，附避坑指南与最佳实践,让你的App交互丝滑流畅。

在Android开发中，WebView作为原生应用与网页内容（H5）交互的核心桥梁，其参数传递能力至关重要，无论是传递用户信息、初始化配置，还是实现深度业务逻辑联动，都离不开高效的参数传递机制，本文将从最基础的URL参数传递讲起，逐步深入到JavaScript接口调用、本地存储、以及处理跨域通信等高级场景，为你提供一份从入门到精通的完整解决方案,彻底解决你在实际开发中遇到的各类难题。

引言：为什么WebView参数传递是Android开发的“必修课”？

作为一名资深开发者，我经常看到一些年轻同事在处理WebView与H5交互时，陷入“传不了”、“传过去H5收不到”、“传过去但App崩溃”的困境，这不仅仅是一个技术点,它直接关系到用户体验和App的性能。

WebView参数传递就是让原生Android代码（Java/Kotlin）和网页前端代码（JavaScript/HTML）能够“对话”，这种对话能力，是实现混合开发（Hybrid App）、动态更新界面、收集用户行为数据等功能的基础，本文将系统性地拆解这个过程，让你告别混乱，掌握一套清晰、可靠的开发范式。

方法一：URL参数传递——最简单直接的“敲门砖”

这是最基础、最常用的方法，适用于初始化传递一些简单的、非敏感的数据，比如用户ID、页面主题、初始筛选条件等。

核心思想： 在加载H5页面时，将参数拼接在URL的查询字符串（Query String）中。

Android端（Java/Kotlin）实现：

// Java 示例
String userId = "10086";
String theme = "dark";
String url = "https://your-h5-page.com/index?userId=" + userId + "&theme=" + theme;
// 注意：对参数进行URL编码，防止特殊字符导致解析错误
try {
    url = "https://your-h5-page.com/index?userId=" + URLEncoder.encode(userId, "UTF-8") + 
          "&theme=" + URLEncoder.encode(theme, "UTF-8");
} catch (UnsupportedEncodingException e) {
    e.printStackTrace();
}
WebView webView = findViewById(R.id.webview);
webView.loadUrl(url);

// Kotlin 示例
val userId = "10086"
val theme = "dark"
val url = "https://your-h5-page.com/index?userId=${URLEncoder.encode(userId, "UTF-8")}&theme=${URLEncoder.encode(theme, "UTF-8")}"
webView.loadUrl(url)

H5端（JavaScript）获取参数：

H5页面可以通过JavaScript的URLSearchParams API轻松获取这些参数。

// 方式一：使用 URLSearchParams (现代浏览器推荐)
const urlParams = new URLSearchParams(window.location.search);
const userId = urlParams.get('userId'); // "10086"
const theme = urlParams.get('theme');   // "dark"
// 方式二：手动解析 (兼容性更好)
function getQueryParam(name) {
    const url = window.location.href;
    const nameRegex = new RegExp("[?&]" + name + "=([^&#]*)");
    const results = nameRegex.exec(url);
    return results === null ? null : decodeURIComponent(results[1]);
}
const userId = getQueryParam('userId');
const theme = getQueryParam('theme');
// 根据参数初始化页面
if (theme === 'dark') {
    document.body.classList.add('dark-theme');
}
console.log(`当前用户ID: ${userId}`);

【专家点评】

• 优点： 实现简单，无需额外配置,适用于所有H5页面。
• 缺点：
  1. 安全性低： 参数会暴露在URL中，不适合传递密码、Token等敏感信息。
  2. 长度有限： URL长度有浏览器限制,过长参数可能导致截断。
  3. 仅初始化： 只能在页面首次加载时传递,无法动态更新。

方法二：JavaScript接口调用——实现双向实时通信的“金钥匙”

当需要从Android向H5传递复杂数据（如JSON对象），或者需要H5在特定时机主动调用Android代码时，JavaScript接口是最高效、最强大的方案。

Android端（Java/Kotlin）实现：

定义一个与JS交互的类：

// Java 示例
public class WebAppInterface {
    Context mContext;
    /** Instantiate the interface and set the context */
    public WebAppInterface(Context c) {
        mContext = c;
    }
    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
    /** 向H5传递复杂JSON数据 */
    @JavascriptInterface
    public String getUserInfo() {
        JSONObject userInfo = new JSONObject();
        try {
            userInfo.put("name", "张三");
            userInfo.put("age", 30);
            userInfo.put("isVip", true);
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return userInfo.toString();
    }
}

将接口暴露给WebView：

// Java 示例
WebView webView = findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true); // 必须开启JS支持
// 关键步骤：将接口类暴露给JS，并指定一个别名
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
// 加载H5页面
webView.loadUrl("https://your-h5-page.com/index");

H5端（JavaScript）调用：

H5页面通过window.Android（别名）即可调用Android端的方法。

// 调用Android的 showToast 方法
function showNativeToast() {
    if (window.Android) {
        window.Android.showToast("你好，来自H5的消息！");
    } else {
        console.log("WebView未注入JS接口");
    }
}
// 调用Android的 getUserInfo 方法获取用户信息
function fetchUserInfo() {
    if (window.Android) {
        const userInfoStr = window.Android.getUserInfo();
        const userInfo = JSON.parse(userInfoStr);
        console.log("用户信息:", userInfo);
        // 更新页面显示
        document.getElementById('user-name').innerText = userInfo.name;
        document.getElementById('user-vip-status').innerText = userInfo.isVip ? "VIP" : "普通用户";
    }
}
// 页面加载完成后，主动获取数据
window.onload = function() {
    fetchUserInfo();
};
// 页面上的按钮可以触发Native方法
// <button onclick="showNativeToast()">显示Toast</button>

【专家点评】

• 优点：
  1. 双向通信： 既能Android调用H5（通过webView.evaluateJavascript()）,也能H5调用Android。
  2. 数据灵活： 可以传递字符串、JSON等复杂数据结构。
  3. 实时交互： 可以实现事件驱动的实时交互。
• 缺点：
  1. 安全性风险（重点！）： 在Android 4.2 (API 17) 之前，@JavascriptInterface注解不存在，恶意网页可能通过反射调用你应用中所有public方法。从4.2开始，所有暴露给JS的方法必须添加@JavascriptInterface注解，这是安全红线！
  2. 线程问题： JS运行在UI线程，如果Android端方法执行耗时操作，会导致ANR（应用无响应）,建议在方法内部开启子线程处理耗时任务。

方法三：WebView与H5双向通信进阶——evaluateJavascript与addJavascriptInterface的完美配合

除了H5调用Android，我们经常需要反向操作：在Android代码中执行一段JS并获取其返回值。

Android端执行JS并获取返回值：

使用evaluateJavascript方法。

// Java 示例
webView.evaluateJavascript(
    "document.getElementById('title').innerText;", // 要执行的JS代码
    new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            // value 是JS代码执行的结果，类型为String
            // 注意：返回的字符串是被引号包裹的，需要手动处理
            String title = value.replace("\"", "");
            Log.d("WebView", "页面标题