解决99%的混合开发痛点：Flutter InAppWebView与dio无缝通信方案

你是否正在为Flutter应用中的网页请求烦恼？当WebView需要与原生HTTP客户端协同工作时，是不是遇到了Cookie同步困难、请求拦截复杂、数据共享繁琐等问题？本文将带你一步到位解决这些痛点，通过dio与Flutter InAppWebView的深度整合，实现网页内请求的高效管理。读完本文，你将掌握：

• 网页与原生请求的Cookie自动同步技术
• 基于dio拦截器的WebView请求代理方案
• 完整的混合应用网络通信架构设计

技术架构解析

在Flutter混合开发中，InAppWebView负责网页内容展示，而dio作为强大的HTTP客户端处理网络请求。两者的协同需要解决三大核心问题：请求代理、数据共享和状态同步。

混合应用网络架构

核心通信流程

sequenceDiagram
    participant Web as InAppWebView
    participant Flutter as Flutter层
    participant Dio as dio客户端
    participant Native as 原生API
    
    Web->>Flutter: 发起网络请求
    Flutter->>Dio: 拦截并转发请求
    Dio->>Native: 执行HTTP操作
    Native-->>Dio: 返回响应数据
    Dio-->>Flutter: 处理响应
    Flutter-->>Web: 注入响应结果

实战集成步骤

1. 环境配置

首先需要在pubspec.yaml中添加必要依赖：

dependencies:
  dio: ^5.0.0
  flutter_inappwebview: ^5.7.0
  dio_cookie_manager: ^2.0.0

完整配置示例可参考example_flutter_app/pubspec.yaml中的依赖管理方式。

2. 实现请求拦截器

创建自定义拦截器，实现WebView请求与dio的桥接：

class WebViewInterceptor extends Interceptor {
  final InAppWebViewController controller;
  
  WebViewInterceptor(this.controller);
  
  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) async {
    // 同步Cookie到WebView
    await _syncCookies(options.uri.host);
    super.onRequest(options, handler);
  }
  
  Future<void> _syncCookies(String domain) async {
    // 从dio CookieManager获取Cookie
    // 注入到InAppWebView
    // 实现代码参考[plugins/cookie_manager/lib/src/cookie_mgr.dart](https://gitcode.com/gh_mirrors/dio/dio/blob/ff4eb26f758f665bcda9752ed60304552bc32903/plugins/cookie_manager/lib/src/cookie_mgr.dart?utm_source=gitcode_repo_files)
  }
}

3. WebView配置与初始化

在Flutter页面中配置InAppWebView，设置请求拦截器：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://example.com")),
  onWebViewCreated: (controller) {
    _webViewController = controller;
    _setupWebViewInterceptor();
  },
  shouldOverrideUrlLoading: (controller, navigationAction) async {
    // 使用dio处理特定请求
    if (navigationAction.request.url.host.contains("api.example.com")) {
      final response = await dio.get(navigationAction.request.url.toString());
      // 将响应注入WebView
      await controller.injectJavaScriptFile(
        source: "window.__dioResponse = ${jsonEncode(response.data)}"
      );
      return NavigationActionPolicy.CANCEL;
    }
    return NavigationActionPolicy.ALLOW;
  },
)

完整实现可参考example_flutter_app/lib/routes/request.dart中的WebView管理逻辑。

高级应用场景

Cookie同步机制

利用dio的CookieManager与WebView的CookieManager实现双向同步：

// 初始化CookieManager
final cookieJar = PersistCookieJar();
dio.interceptors.add(CookieManager(cookieJar));

// WebView同步dio的Cookie
Future<void> syncDioCookiesToWebView(String url) async {
  final cookies = await cookieJar.loadForRequest(Uri.parse(url));
  for (var cookie in cookies) {
    await _webViewController.setCookie(
      cookie: Cookie(
        cookie.name,
        cookie.value,
        domain: cookie.domain,
        path: cookie.path,
        expires: cookie.expires,
      ),
    );
  }
}

详细实现参考dio_cookie_manager插件的核心代码。

上传下载进度监听

结合dio的进度回调与WebView的JavaScript桥接，实现文件传输进度展示：

dio.download(
  "https://example.com/largefile.zip",
  savePath,
  onReceiveProgress: (received, total) {
    final progress = (received / total * 100).toStringAsFixed(0);
    _webViewController.evaluateJavascript(
      source: "window.updateDownloadProgress('$progress%');"
    );
  },
);

常见问题解决方案

跨域资源共享(CORS)问题

当WebView中的AJAX请求遇到CORS限制时，可通过dio代理请求绕过限制：

// 在shouldOverrideUrlLoading中处理跨域请求
if (navigationAction.request.url.host.contains("thirdparty-api.com")) {
  final response = await dio.get(
    navigationAction.request.url.toString(),
    options: Options(
      headers: {
        "Origin": "https://your-app-domain.com",
        "Referer": "https://your-app-domain.com"
      }
    )
  );
  return NavigationActionPolicy.CANCEL;
}

SSL证书固定

对于需要证书固定(Certificate Pinning)的场景，可使用dio的httpClientAdapter配置：

dio.httpClientAdapter = HttpClientAdapter()
  ..onHttpClientCreate = (client) {
    client.badCertificateCallback = (cert, host, port) {
      // 证书验证逻辑
      return verifyCertificate(cert, host, port);
    };
  };

参考example_dart/lib/certificate_pinning.dart中的实现方式。

性能优化建议

1. 请求缓存策略：使用dio的缓存拦截器减少重复请求

dio.interceptors.add(CacheInterceptor(
  options: CacheOptions(
    store: MemCacheStore(),
    policy: CachePolicy.forceCache,
    maxStale: Duration(days: 7),
  )
));

2. 连接池管理：配置dio的HTTP连接池参数

dio.httpClientAdapter = DefaultHttpClientAdapter()
  ..httpClient.maxConnectionsPerHost = 5;

3. WebView预加载：在应用启动时初始化WebView实例，减少首次加载时间

总结与展望

通过本文介绍的方案，我们实现了Flutter InAppWebView与dio的无缝集成，解决了混合应用中的网络通信难题。这种架构不仅提升了开发效率，还确保了应用网络请求的一致性和安全性。

随着Flutter生态的不断发展，我们期待dio社区能推出更完善的WebView集成方案，例如web_adapter中正在开发的Web标准API适配层，将进一步简化混合应用的网络层设计。

如果你在实施过程中遇到任何问题，欢迎通过项目的CONTRIBUTING-ZH.md文档提供反馈或参与贡献。

别忘了点赞收藏本文，关注项目更新，下期我们将带来《dio插件开发实战：自定义协议拦截器》！