WebView 与 H5 交互深度解析——跨平台开发者的原生与 Web 通信全攻略

一句话概括

Android WebView 是原生应用内嵌 H5 页面的官方容器——它不仅仅是”在应用里打开一个网页”，而是一个完整的浏览器引擎（Chromium），支持 JavaScript 原生交互、URL 拦截、Cookie 管理和自定义 UI 控制，是混合应用和原生应用中承载 Web 内容的基石组件。

背景与意义

在移动开发中，”H5 + 原生”混合架构是非常普遍的实践。无论是 Flutter 应用中的政策协议页面、React Native 应用中的复杂表单、还是鸿蒙应用中的活动推广页面，WebView 都是承载这些 H5 内容的标准容器。

对于跨平台开发者来说，WebView 是一个”看起来简单，用起来全是坑”的组件。你可能会遇到：

• 页面加载完成后一片空白
• JavaScript 调用原生代码失败
• Cookie 丢失导致用户需要反复登录
• 在 Android 设备上 WebView 的表现与其他设备不一致
• 频繁切换页面导致内存急剧增长，最终被系统 Kill

更棘手的是，不同跨平台框架对 WebView 的封装存在差异。Flutter 有 webview_flutter 和 flutter_inappwebview，React Native 有 react-native-webview，但这些插件底层都依赖于 Android 的 WebView 实现。理解了 Android 原生 WebView 的工作原理，无论使用哪个框架，你都能准确地排查问题。

本文将系统性地解析 Android WebView 的核心机制，并以跨平台开发者的视角，重点讲解那些最具实战价值的知识点——从基础配置到 JS Bridge 实现，从 Cookie 管理到性能优化，最后深入 Flutter/RN WebView 插件的底层实现原理。

核心知识点拆解

Android WebView 基础设置

WebView 的引入和基本使用

WebView 是 Android 系统自带的组件，在 AndroidManifest.xml 中不需要额外声明，但需要声明网络权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

在布局文件中添加 WebView：

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

最基础的使用：

WebView webView = findViewById(R.id.webview);
webView.loadUrl("https://www.example.com");

WebSettings：配置 WebView 行为

WebView 的绝大多数行为通过 WebSettings 配置。这是一个非常庞大的配置类，以下是跨平台开发者最常用的配置项：

WebSettings settings = webView.getSettings();

// JavaScript 支持（必须开启）
settings.setJavaScriptEnabled(true);

// DOM Storage 支持（LocalStorage/SessionStorage）
settings.setDomStorageEnabled(true);

// 数据库存储支持（Web SQL）
settings.setDatabaseEnabled(true);

// 缓存模式
settings.setCacheMode(WebSettings.LOAD_DEFAULT);
// LOAD_DEFAULT: 默认，优先使用缓存
// LOAD_CACHE_ELSE_NETWORK: 离线模式
// LOAD_NO_CACHE: 不使用缓存
// LOAD_CACHE_ONLY: 仅使用缓存

// 自适应屏幕
settings.setUseWideViewPort(true);      // 适应视口
settings.setLoadWithOverviewMode(true);  // 缩放至屏幕宽度
settings.setSupportZoom(true);           // 支持用户缩放
settings.setBuiltInZoomControls(true);   // 内置缩放控件

// 混合内容（HTTP/HTTPS）
// Android 5.0+ 默认不允许混合内容 → HTTPS 页面加载 HTTP 内容会被阻止
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

// 文件访问
settings.setAllowFileAccess(true);
settings.setAllowContentAccess(true);

// 用户代理设置
String userAgent = settings.getUserAgentString();
settings.setUserAgentString(userAgent + " MyApp/1.0");

// 自动加载图片
settings.setLoadsImagesAutomatically(true);

// 文字编码
settings.setDefaultTextEncodingName("UTF-8");

WebViewClient：页面加载控制

WebViewClient 负责处理页面加载过程中的各种回调：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        // 拦截 URL 加载，返回 true 表示由宿主处理，false 表示由 WebView 处理
        String url = request.getUrl().toString();
        if (url.startsWith("myapp://")) {
            // 处理自定义 Scheme
            handleAppScheme(url);
            return true;
        }
        return false;
    }
    
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // 页面开始加载
        showProgressBar();
    }
    
    @Override
    public void onPageFinished(WebView view, String url) {
        // 页面加载完成
        hideProgressBar();
    }
    
    @Override
    public void onReceivedError(WebView view, WebResourceRequest request, 
                                 WebResourceError error) {
        // 加载错误
        if (request.isForMainFrame()) {
            showErrorPage();
        }
    }
    
    @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, 
                                    SslError error) {
        // SSL 证书错误
        handler.proceed();  // 不推荐，仅为示例
    }
});

WebChromeClient：浏览器 UI 控制

WebChromeClient 负责处理影响浏览器 UI 的事件：

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        // 页面加载进度
        updateProgressBar(newProgress);
    }
    
    @Override
    public boolean onJsAlert(WebView view, String url, String message, 
                              JsResult result) {
        // 处理 JavaScript 的 alert() 弹窗
        new AlertDialog.Builder(context)
            .setMessage(message)
            .setPositiveButton("确定", (dialog, which) -> result.confirm())
            .show();
        return true;
    }
    
    @Override
    public boolean onJsConfirm(WebView view, String url, String message, 
                                JsResult result) {
        // 处理 JavaScript 的 confirm() 弹窗
        new AlertDialog.Builder(context)
            .setMessage(message)
            .setPositiveButton("确定", (dialog, which) -> result.confirm())
            .setNegativeButton("取消", (dialog, which) -> result.cancel())
            .show();
        return true;
    }
    
    @Override
    public void onReceivedTitle(WebView view, String title) {
        // 接收页面标题
        setTitle(title);
    }
});

JavaScriptInterface 原理与安全风险

@JavascriptInterface 注解

@JavascriptInterface 是 Android 4.2（API 17）引入的注解，用于标记暴露给 JavaScript 调用的方法。它是原生代码和 JavaScript 交互的核心桥梁。

public class WebAppInterface {
    private Context context;
    
    public WebAppInterface(Context context) {
        this.context = context;
    }
    
    @JavascriptInterface
    public String getDeviceInfo() {
        return Build.MANUFACTURER + " " + Build.MODEL + ", Android " + Build.VERSION.RELEASE;
    }
    
    @JavascriptInterface
    public void shareText(String text) {
        Intent shareIntent = new Intent(Intent.ACTION_SEND);
        shareIntent.setType("text/plain");
        shareIntent.putExtra(Intent.EXTRA_TEXT, text);
        context.startActivity(Intent.createChooser(shareIntent, "分享"));
    }
    
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
    }
}

// 注册到 WebView
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

之后在 JavaScript 中就可以调用：

// JavaScript 侧调用原生方法
var deviceInfo = window.Android.getDeviceInfo();
console.log(deviceInfo);

window.Android.showToast("Hello from Web!");

安全风险

@JavascriptInterface 的主要风险在于：

1. 反射注入攻击：如果 WebView 加载了不受信任的页面（比如第三方网站），恶意页面可以通过 JavaScriptInterface 获取设备信息、访问文件系统，甚至执行任意代码。

2. XSS（跨站脚本攻击）：如果 WebView 中加载的 H5 页面存在 XSS 漏洞，攻击者可以注入恶意的 JavaScript 代码，通过这些代码调用暴露的原生方法。

3. 参数注入：攻击者可以向原生方法传递特制的参数，如文件路径、SQL 注入等。

安全实践：

// 1. 只加载受信任的内容
// 不要对任意 URL 启用 JavaScriptInterface
// 仅在你完全控制的 H5 页面中使用

// 2. 对输入参数进行验证
@JavascriptInterface
public void saveData(String key, String value) {
    // 参数验证
    if (key == null || key.isEmpty()) {
        return;
    }
    if (key.contains("..") || key.contains("/")) {
        return; // 防止路径穿越攻击
    }
    // 安全地处理数据
}

// 3. 最小化暴露范围
// 不要暴露敏感方法，如文件删除、数据库操作等

// 4. 在生产环境禁用 JavaScriptInterface
// 如果 H5 页面是纯展示的，不需要启用 JavaScriptInterface

Android 4.2 之前的版本

在 Android 4.2 之前，所有添加了 addJavascriptInterface 的方法都默认暴露给 JavaScript，存在严重的安全漏洞（2012 年的 “mJs” 漏洞）。如果你的应用需要支持 API 17 以下的版本，需要特别小心：

• 使用 @JavascriptInterface 注解（API 17+）替代以前的命名约定
• 在 API 17 以下的设备上完全禁用 JavaScriptInterface

URL 拦截（shouldOverrideUrlLoading）

拦截机制

shouldOverrideUrlLoading 是 WebViewClient 中最强大的 URL 拦截回调。它在 WebView 即将加载某个 URL 时被调用，开发者可以决定是否让 WebView 继续加载，或者拦截这个 URL 交给原生代码处理。

@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
    String url = request.getUrl().toString();
    Uri uri = Uri.parse(url);
    
    // 1. 处理自定义 Scheme
    if ("myapp".equals(uri.getScheme())) {
        handleAppScheme(uri);
        return true;
    }
    
    // 2. 处理特定域名
    if ("www.example.com".equals(uri.getHost())) {
        // 让 WebView 继续加载
        return false;
    }
    
    // 3. 拦截外部链接打开外部应用
    if ("tel".equals(uri.getScheme())) {
        Intent intent = new Intent(Intent.ACTION_DIAL, uri);
        context.startActivity(intent);
        return true;
    }
    
    if ("mailto".equals(uri.getScheme())) {
        Intent intent = new Intent(Intent.ACTION_SENDTO, uri);
        context.startActivity(intent);
        return true;
    }
    
    // 4. 默认：在 WebView 内部加载
    return false;
}

v1（旧版）与 v2（新版）的区别

shouldOverrideUrlLoading 有两个版本：

// 旧版（已废弃）
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    // ...
}

// 新版（推荐）
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
    WebResourceRequest 包含了更丰富的信息：
    - request.getUrl(): 请求的 URL
    - request.isForMainFrame(): 是否为主框架请求
    - request.getMethod(): HTTP 方法（GET/POST）
    - request.getRequestHeaders(): 请求头
}

对于跨平台开发者的价值

URL 拦截在以下场景中非常有用：

1. 自定义 Scheme 处理：H5 页面通过 window.location.href = 'myapp://open?page=detail' 跳转原生页面
2. 加载状态控制：实时监控 WebView 正在加载的资源
3. 广告过滤：拦截特定的广告资源 URL
4. 安全过滤：阻止加载已知恶意域名

H5 与原生双向通信（JS Bridge）

JS Bridge 的架构

JS Bridge（JavaScript Bridge）是 H5 和原生之间双向通信的基础设施。一个完整的 Bridge 架构包含三个要素：

1. JavaScript 调用原生：通过 @JavascriptInterface 实现
2. 原生调用 JavaScript：通过 webView.evaluateJavascript() 实现
3. 消息队列机制：确保双方都知道对方的调用状态

原生调用 JavaScript（单向通信）

// Android 4.4+ 推荐方式
webView.evaluateJavascript("javascript:functionName('参数')", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        // 接收 JavaScript 的返回值
        Log.d("WebView", "JS returned: " + value);
    }
});

// 兼容低版本的方式
webView.loadUrl("javascript:functionName('参数')");

完整的双向通信 JS Bridge

一个生产级别的 JS Bridge 实现通常如下：

原生侧（Android）：

public class BridgeInterface {
    private Context context;
    private WebView webView;
    private Map<String, BridgeCallback> pendingCallbacks = new HashMap<>();
    private int callbackId = 0;
    
    public BridgeInterface(Context context, WebView webView) {
        this.context = context;
        this.webView = webView;
    }
    
    // JavaScript 调用原生
    @JavascriptInterface
    public void postMessage(String action, String data, int callbackId) {
        // 在主线程中执行
        new Handler(Looper.getMainLooper()).post(() -> {
            handleAction(action, data, callbackId);
        });
    }
    
    private void handleAction(String action, String data, int callbackId) {
        switch (action) {
            case "getLocation":
                String location = getCurrentLocation();
                sendResponse(callbackId, location);
                break;
            case "takePhoto":
                pendingCallbacks.put("photo_" + callbackId, 
                    result -> sendResponse(callbackId, result));
                openCamera();
                break;
        }
    }
    
    // 原生调用 JavaScript
    public void sendResponse(int callbackId, String data) {
        String script = "window._bridgeCallbacks[" + callbackId + "]('" + 
                        JSONObject.quote(data) + "')";
        webView.evaluateJavascript(script, null);
    }
    
    public void callJS(String action, String data) {
        String script = "window._bridge.handleMessage('" + action + "', '" + 
                        JSONObject.quote(data) + "')";
        webView.evaluateJavascript(script, null);
    }
}

interface BridgeCallback {
    void onResult(String result);
}

JavaScript 侧：

// 使用 IIFE 隔离作用域
window._bridge = (function() {
    const callbacks = {};
    let callbackId = 0;
    
    // 调用原生方法
    function callNative(action, data) {
        return new Promise((resolve, reject) => {
            const id = ++callbackId;
            callbacks[id] = resolve;
            
            // Android 是通过 @JavascriptInterface 暴露的 Android 对象
            if (window.Android && window.Android.postMessage) {
                window.Android.postMessage(action, JSON.stringify(data), id);
            } else {
                reject(new Error('Native bridge not available'));
            }
        });
    }
    
    // 注册全局回调函数（给原生调用）
    window._bridgeCallbacks = {};
    
    // 原生调用 JS 的入口
    function handleMessage(action, data) {
        switch(action) {
            case 'updateConfig':
                updateConfig(JSON.parse(data));
                break;
            case 'showNotification':
                showNotification(JSON.parse(data));
                break;
        }
    }
    
    return {
        callNative,
        handleMessage,
        getDeviceInfo: () => callNative('getDeviceInfo'),
        takePhoto: () => callNative('takePhoto'),
        share: (text) => callNative('share', { text })
    };
})();

JS Bridge 的实现细节

为什么不直接在 @JavascriptInterface 方法中处理耗时操作？

@JavascriptInterface 方法是在 WebView 的 WebKit 内部线程中调用的，不是主线程。如果在其中执行 UI 操作或阻塞操作，可能会导致线程安全问题或 ANR。

正确的做法是：在 @JavascriptInterface 方法中通过 Handler 将操作 post 到主线程，或者启动一个后台线程来处理耗时任务。

Cookie 同步

CookieManager 使用

Android WebView 使用 CookieManager 来管理 Cookie。这是实现 H5 页面登录态同步的关键组件。

CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setAcceptCookie(true);

// Android 5.0+ 支持第三方 Cookie
cookieManager.setAcceptThirdPartyCookies(webView, true);

// 设置 Cookie
cookieManager.setCookie("https://www.example.com", 
    "session_id=abc123; Domain=.example.com; Path=/");

// 获取 Cookie
String cookies = cookieManager.getCookie("https://www.example.com");

// 移除所有 Cookie
cookieManager.removeAllCookies(null);

// 移除 Session Cookie
cookieManager.removeSessionCookies(null);

// 刷新 Cookie（确保立即生效）
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    cookieManager.flush();
}

跨应用的 Cookie 共享

如果你的应用中既有原生网络请求（如 OkHttp），又有 WebView，需要手动同步 Cookie：

// 从 WebView 获取 Cookie 后注入到 OkHttp
public class WebViewCookieJar implements CookieJar {
    private final CookieManager webViewCookieManager;
    
    public WebViewCookieJar() {
        webViewCookieManager = CookieManager.getInstance();
    }
    
    @Override
    public void saveFromResponse(HttpUrl url, List<Cookie> cookies) {
        for (Cookie cookie : cookies) {
            webViewCookieManager.setCookie(url.toString(), cookie.toString());
        }
    }
    
    @Override
    public List<Cookie> loadForRequest(HttpUrl url) {
        String cookies = webViewCookieManager.getCookie(url.toString());
        if (cookies == null || cookies.isEmpty()) return Collections.emptyList();
        
        List<Cookie> result = new ArrayList<>();
        for (String cookie : cookies.split(";")) {
            result.add(Cookie.parse(url, cookie.trim()));
        }
        return result;
    }
}

跨平台场景下的 Cookie 处理

在 Flutter 项目中，如果你使用 webview_flutter 插件，Cookie 的管理责任完全在原生侧。当你需要通过 Flutter 的原生网络请求（如 dio）与 WebView 共享登录态时，需要在原生层实现 Cookie 同步机制。

一个常见的方案是：用户登录后，将认证 Token 写入 Cookie 并同步给 WebView，然后 WebView 加载的页面就自动带上了登录态。

// 在插件端实现 Cookie 同步
public class CookieSyncPlugin implements FlutterPlugin, MethodCallHandler {
    @Override
    public void onMethodCall(MethodCall call, Result result) {
        if (call.method.equals("setCookie")) {
            String url = call.argument("url");
            String cookie = call.argument("cookie");
            CookieManager.getInstance().setCookie(url, cookie);
            CookieManager.getInstance().flush();
            result.success(true);
        }
    }
}

WebView 常见问题

内存泄漏

WebView 是 Android 组件中内存泄漏的”重灾区”。主要原因：

1. Activity 销毁时 WebView 未正确销毁：WebView 持有 Activity 的引用，如果 Activity 被销毁但 WebView 还在运行（如加载线程未完成），会导致 Activity 无法被 GC 回收。

2. 多线程问题：WebView 的加载过程涉及多个线程，如果这些线程在 Activity 销毁后仍然运行，会产生泄漏。

标准解决方案：

@Override
protected void onDestroy() {
    // 在 Activity 的 onDestroy 中销毁 WebView
    if (webView != null) {
        // 从父布局中移除
        ViewGroup parent = (ViewGroup) webView.getParent();
        if (parent != null) {
            parent.removeView(webView);
        }
        // 销毁 WebView
        webView.removeAllViews();
        webView.destroy();
        webView = null;
    }
    super.onDestroy();
}

对于使用了 webview_flutter 插件的 Flutter 项目，插件内部已经处理了 WebView 的生命周期管理。但如果你的 Flutter 应用中同时使用了多个 WebView 实例，仍然需要注意在页面不再需要时及时销毁 Widget。

白屏问题

WebView 白屏是跨平台开发者最常遇到的问题之一。常见原因：

1. 页面加载失败：网络不可用或 URL 错误
2. JavaScript 错误：H5 页面中 JavaScript 抛出异常导致渲染失败
3. 混合内容被阻止：HTTPS 页面中加载了 HTTP 资源
4. WebView 渲染进程崩溃：在低端设备上，WebView 进程可能被系统杀死
5. 空白 HTML 加载：页面本身就是一个空白 HTML

解决方案：

// 1. 允许混合内容
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

// 2. 设置错误页面
@Override
public void onReceivedError(WebView view, WebResourceRequest request, 
                             WebResourceError error) {
    if (request.isForMainFrame()) {
        view.loadUrl("file:///android_asset/error.html");
    }
}

// 3. 使用 onRenderProcessGone 处理渲染进程崩溃（Android 8.0+）
@Override
public boolean onRenderProcessGone(WebView view, RenderProcessGoneDetail detail) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        if (detail.didCrash()) {
            // WebView 渲染进程崩溃
            // 重新创建 WebView
            recreateWebView();
            return true;
        }
    }
    return false;
}

长按选中问题

默认情况下，用户可以在 WebView 中长按文字进行选中复制。对于某些场景（如协议页面），你可能想禁用这种行为：

// 禁用长按弹出菜单
webView.setOnLongClickListener(v -> true);

// 或更精确地控制：通过 WebViewClient 的 onLongClick 回调

混合内容（Mixed Content）

混合内容是指 HTTPS 页面中包含 HTTP 资源（图片、脚本、样式表等）。Android 5.0+ 默认阻止混合内容加载。

// 三个可选值
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_NEVER_ALLOW);  // 拒绝所有混合内容
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW); // 允许所有混合内容
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE); // 兼容模式

安全建议：系统默认的 MIXED_CONTENT_NEVER_ALLOW 是最安全的。如果你的 H5 页面确实需要加载混合内容，首先要确认这些 HTTP 资源是可信的，再使用 MIXED_CONTENT_COMPATIBILITY_MODE。

Flutter WebView / RN WebView 插件的底层原理

Flutter webview_flutter 插件

Flutter 的 webview_flutter 插件是目前最流行的 WebView 解决方案，它的底层实现是：

Android 侧：

webview_flutter 在 Android 上使用 PlatformView 机制将原生的 WebView 嵌入到 Flutter 的 UI 中。PlatformView 是 Flutter 提供的一种让 Android 原生视图在 Flutter Widget 树中显示的机制。

实现流程：

1. WebView Widget 参数通过 MethodChannel 传递到 Android 端
2. Android 端创建原生 WebView 实例
3. 通过 PlatformView 将 WebView 渲染到 Flutter 的纹理（Texture）中
4. 所有 JavaScript 的调用、设置加载都通过 MethodChannel 传递

主要问题：

• 键盘输入问题：PlatformView 嵌入后，文本输入框的键盘弹出可能存在焦点问题
• 滚动冲突：Flutter 的滚动与 WebView 内部滚动可能产生冲突
• 性能开销：PlatformView 需要通过纹理传输，有额外的性能开销

React Native react-native-webview

React Native 的 react-native-webview 插件同样使用原生的 WebView 组件，但实现方式不同：

Android 侧：

react-native-webview 直接继承自 android.webkit.WebView，通过 React Native 的 ViewManager 系统自动管理其生命周期。

它底层使用 React Native 的事件系统来传递消息：

1. JavaScript 调用通过 postMessage → WebView 触发 onMessage → 通过 React Native 事件总线传递到 JS 侧
2. RN 侧通过 injectJavaScript 向 WebView 注入 JS 代码

关键差异：

特性	Flutter webview_flutter	React Native react-native-webview
嵌入方式	PlatformView（纹理）	原生 View 直接嵌入
消息传输	MethodChannel	React Native 事件总线
性能	中等（纹理传输开销）	较好（原生 View 嵌入）
平台统一性	同一 API 封装 iOS/Android	同一 API 封装 iOS/Android

对于跨平台开发者的影响

理解这些插件的工作原理后，你会发现：

• 当 WebView 显示异常时，首先要排查的是原生 WebView 的配置是否正确
• 所有的 JS Bridge 最终都是通过 @JavascriptInterface 和 evaluateJavascript 实现的
• WebView 的性能瓶颈往往不在框架层，而在 WebView 内核本身

实战案例

案例一：Flutter 应用中的 JS Bridge 实现

需求：Flutter 应用中有一个 H5 活动页面，H5 需要获取用户信息、调用原生的分享功能和选择图片功能。

实现方案：

1. 原生侧（通过 Flutter Plugin）：

public class HybridBridgePlugin implements FlutterPlugin, MethodCallHandler {
    private WebView webView;
    private Result navigateResult;
    
    @Override
    public void onMethodCall(MethodCall call, Result result) {
        switch (call.method) {
            case "initWebView":
                // 从 Flutter 侧获取 WebView 控件
                break;
            case "sendToJS":
                String jsCode = call.argument("code");
                webView.evaluateJavascript(jsCode, null);
                result.success(true);
                break;
            case "getUserInfo":
                // 获取用户信息并通过 evaluateJavascript 传递给 H5
                String userInfoJson = getUserInfoJson();
                webView.evaluateJavascript(
                    "window._bridge.onUserInfo('" + userInfoJson + "')", null);
                result.success(true);
                break;
        }
    }
    
    @JavascriptInterface
    public void requestShare(String title, String url) {
        // H5 请求原生分享
        Intent shareIntent = new Intent(Intent.ACTION_SEND);
        shareIntent.setType("text/plain");
        shareIntent.putExtra(Intent.EXTRA_TEXT, url);
        shareIntent.putExtra(Intent.EXTRA_SUBJECT, title);
        context.startActivity(Intent.createChooser(shareIntent, "分享"));
    }
}

1. Flutter 侧使用：

class HybridWebView extends StatefulWidget {
  @override
  _HybridWebViewState createState() => _HybridWebViewState();
}

class _HybridWebViewState extends State<HybridWebView> {
  late WebViewController _controller;
  
  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://activity.example.com',
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (controller) {
        _controller = controller;
      },
      onPageFinished: (url) {
        // 页面加载完成后注入用户信息
        _injectUserInfo();
      },
    );
  }
  
  Future<void> _injectUserInfo() async {
    final userInfo = await getUserInfo();
    await _controller.runJavascript(
      'window._bridge.setUserInfo(${jsonEncode(userInfo)})',
    );
  }
}

案例二：React Native 中 WebView 登录态同步

需求：用户在 RN 的原生登录页面登录后，WebView 中的 H5 页面需要自动带上登录态，不需要重新登录。

实现方案：

import { WebView } from 'react-native-webview';
import { NativeModules } from 'react-native';

function LoginAwareWebView({ uri }) {
  const webViewRef = useRef(null);
  
  useEffect(() => {
    // 从原生模块获取当前登录 Token
    NativeModules.AuthModule.getToken().then(token => {
      if (webViewRef.current && token) {
        // 页面加载完成后注入 Cookie
        webViewRef.current.injectJavaScript(`
          document.cookie = "auth_token=${token}; path=/; domain=.example.com";
          location.reload();
        `);
      }
    });
  }, [uri]);
  
  return (
    <WebView
      ref={webViewRef}
      source={{ uri }}
      onMessage={(event) => {
        // 处理来自 H5 的消息
        handleMessage(JSON.parse(event.nativeEvent.data));
      }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      sharedCookiesEnabled={true} // iOS 专用
    />
  );
}

案例三：WebView 性能优化

需求：应用中内嵌的 H5 页面加载缓慢，需要优化加载速度。

优化方案：

1. 预加载机制：在应用启动时预先初始化 WebView：

// 应用启动时创建并预热 WebView
public class WebViewPreloader {
    private static WebView preloadedWebView;
    
    static void preload(Context context) {
        if (preloadedWebView == null) {
            preloadedWebView = new WebView(context.getApplicationContext());
            preloadedWebView.getSettings().setJavaScriptEnabled(true);
            preloadedWebView.loadUrl("about:blank");
        }
    }
    
    static WebView getPreloadedWebView() {
        WebView view = preloadedWebView;
        preloadedWebView = null;
        return view;
    }
}

1. 缓存策略优化：

// 启用多级缓存
settings.setCacheMode(WebSettings.LOAD_DEFAULT);
settings.setAppCacheEnabled(true);
settings.setAppCachePath(context.getCacheDir().getAbsolutePath());
settings.setDatabaseEnabled(true);
settings.setDomStorageEnabled(true);

1. 资源预加载：

// 先预加载关键资源
webView.loadUrl("https://example.com/critical-assets.html");

// 完成后再加载主页面
webView.loadUrl("https://example.com/main-page.html");

常见问题

Q1：WebView 页面加载显示空白

排查清单：

1. 检查网络权限：<uses-permission android:name="android.permission.INTERNET" />
2. 检查 URL 是否正确——在浏览器中打开测试
3. 检查是否启用了 JavaScript：settings.setJavaScriptEnabled(true)
4. 检查混合内容设置：HTTPS 页面加载 HTTP 资源会被阻止
5. 检查 ProGuard 混淆规则是否保留了 WebView 相关的类
6. 检查 WebView 版本：Android System WebView 可能需要更新

Q2：@JavascriptInterface 方法不执行

排查清单：

1. setJavaScriptEnabled(true) 是否设置？
2. 方法是否添加了 @JavascriptInterface 注解？
3. 添加 JavaScriptInterface 的名称（"Android"）在 JS 侧是否一致？
4. 方法是否在非 UI 线程中调用了 UI 操作？
5. proguard-rules.pro 是否有混淆规则保留：

   -keepclassmembers class * {
    @android.webkit.JavascriptInterface <methods>;
   }
   

Q3：WebView Cookie 不工作，H5 页面反复跳转回登录页

排查清单：

1. CookieManager 是否设置了 setAcceptCookie(true)？
2. 如果是跨域请求，是否设置了 setAcceptThirdPartyCookies()？
3. Cookie 的 Domain 和 Path 设置是否正确？
4. 是否有其他代码（如网络请求）覆盖了 Cookie？
5. 在 WebView 关闭时是否清除了 Cookie？

Q4：Flutter WebView 在 Android 上键盘弹出后页面错位

原因：这是 PlatformView 键盘处理的已知问题。

解决方案：

• 升级到最新版本的 webview_flutter（新版本已经修复了大部分键盘问题）
• 在 AndroidManifest.xml 中设置 android:windowSoftInputMode="adjustResize"
• 使用 flutter_inappwebview 插件替代 webview_flutter（它的键盘处理更好）

Q5：WebView 内存占用过大，导致应用被 Kill

解决方案：

1. 在 Activity 销毁时正确清理 WebView
2. 限制 WebView 缓存大小：

   settings.setAppCacheMaxSize(10 * 1024 * 1024); // 10MB
   

3. 在 WebView 隐藏时暂停 JavaScript： ```java @Override public void onPause() { super.onPause(); webView.onPause(); // 暂停所有 JavaScript 和渲染 }

@Override public void onResume() { super.onResume(); webView.onResume(); } ```

1. 不要同时创建多个 WebView 实例

总结

Android WebView 是一个功能极其丰富但也极其复杂的组件。对于跨平台开发者来说，掌握 WebView 的核心机制能够帮助你在以下场景中得心应手：

1. 混合开发：理解 WebView 基础配置，让 H5 页面在原生容器中完美运行
2. 原生 H5 双向通信：正确使用 JavaScriptInterface 和 evaluateJavascript，实现高效的 JS Bridge
3. 登录态管理：通过 CookieManager 实现原生和 H5 之间的认证状态同步
4. 问题排查：记住常见问题（白屏、内存泄漏、键盘问题）的排查清单
5. 性能优化：合理使用缓存策略和预加载机制，提升 H5 页面加载速度

最后的三条核心经验：

• 永远不要在不信任的 URL 上启用 JavaScriptInterface——这是最基本的安全规则
• 生命周期的管理比功能实现更重要——WebView 的内存泄漏是所有问题的根源
• 理解底层原理比记住 API 更重要——所有 Framework 插件（Flutter/RN）都基于 Android 原生的 WebView，理解底层才能不被框架限制