Flutter混合开发新思路：dio与WebView的深度协作指南-深圳市維司達科技有限公司

Flutter混合开发新思路：dio与WebView的深度协作指南

【免费下载链接】dio项目地址: https://gitcode.com/gh_mirrors/dio/dio

"为什么我的Flutter应用里，WebView页面总是无法保持登录状态？"、"网页内的AJAX请求为什么总是被CORS限制？"、"如何让WebView中的文件上传进度实时同步到Flutter界面？"如果你也遇到过这些问题，那么本文将为你提供一套全新的解决方案。

不同于传统的简单桥接方案，我们将深入探讨如何通过dio的强大功能，为Flutter InAppWebView提供企业级的网络通信支持。

重新定义混合应用网络层

在混合开发中，我们常常面临这样的困境：WebView内的网络请求与Flutter原生请求各自为政，导致用户体验割裂。实际上，通过合理的架构设计，我们可以让两者完美融合。

混合应用网络架构核心要素：

统一认证管理：Token自动刷新与同步机制
智能请求代理：根据业务规则动态路由请求
实时状态同步：进度、错误、数据的双向通信
性能优化策略：缓存、连接池、预加载

实战：构建Token自动管理方案

环境准备

首先配置项目依赖：

dependencies: dio: ^5.0.0 flutter_inappwebview: ^5.7.0

实现Token拦截器

让我们从Token管理开始，这是现代应用中最常见的认证方式：

class TokenInterceptor extends Interceptor { final InAppWebViewController webController; String? accessToken; String? refreshToken; TokenInterceptor(this.webController); @override void onRequest(RequestOptions options, RequestInterceptorHandler handler) async { // 自动添加Token到请求头 if (accessToken != null && !options.headers.containsKey('Authorization')) { options.headers['Authorization'] = 'Bearer $accessToken'; } // 同步Token到WebView await _syncTokenToWebView(); super.onRequest(options, handler); } @override void onError(DioException err, ErrorInterceptorHandler handler) async { // Token过期自动刷新 if (err.response?.statusCode == 401) { await _refreshToken(); // 重试原请求 final retryResult = await dio.fetch(err.requestOptions); return handler.resolve(retryResult); } super.onError(err, handler); } Future<void> _syncTokenToWebView() async { if (accessToken != null) { await webController.evaluateJavascript( source: "localStorage.setItem('flutter_token', '$accessToken');" ); } }

WebView的智能配置

在Flutter页面中，我们需要让WebView与dio协同工作：

InAppWebView( initialUrlRequest: URLRequest(url: Uri.parse("https://your-app.com"))), onWebViewCreated: (controller) { _setupTokenSync(controller); }, onLoadStart: (controller, url) { // 在页面加载时注入Token _injectTokenScript(controller); }, onConsoleMessage: (controller, consoleMessage) { // 监听WebView控制台，处理Token相关消息 if (consoleMessage.message.contains('token_expired')) { _handleTokenExpired(); } }, )

高级特性：实时数据流处理

WebSocket与dio的完美结合

在实际项目中，我们经常需要处理实时数据流。以下是如何在混合应用中实现WebSocket通信：

class RealTimeDataHandler { final WebSocketChannel channel; final InAppWebViewController webController; void startListening() { channel.stream.listen((data) { // 将实时数据推送到WebView webController.evaluateJavascript( source: "window.dispatchEvent(new CustomEvent('realtime_data', {detail: $data}));" ); }); } Future<void> sendToServer(dynamic data) async { // 使用dio发送数据到服务器 await dio.post( '/realtime/update', data: data, options: Options( contentType: 'application/json', ), ); } }

文件流式上传

大文件上传是另一个常见需求，通过dio的流式处理能力，我们可以实现高效的断点续传：

Future<void> uploadLargeFile(String filePath) async { final file = File(filePath); final fileSize = await file.length(); final uploadStream = file.openRead().transform( StreamTransformer.fromHandlers( handleData: (chunk, sink) { final progress = (chunk.length / fileSize * 100).toStringAsFixed(1); // 实时更新WebView中的进度显示 webController.evaluateJavascript( source: "window.updateUploadProgress('$progress%');" ); sink.add(chunk); }); await dio.post( '/upload', data: Stream.fromIterable([await file.readAsBytes()])), options: Options( contentType: 'application/octet-stream', headers: { 'Content-Length': fileSize.toString(), 'X-Upload-Token': accessToken, ), onSendProgress: (sent, total) { // 双重进度保障：既通过JavaScript更新，也通过Flutter状态管理 setState(() { _uploadProgress = sent / total; }); }, ); }

常见问题深度解析

Token安全存储策略

在混合应用中，Token的安全存储至关重要：

class SecureTokenManager { static const _tokenKey = 'secure_auth_token'; Future<void> saveToken(String token) async { // 使用Flutter Secure Storage保存Token await FlutterSecureStorage().write(key: _tokenKey, value: token); } Future<String?> getToken() async { return await FlutterSecureStorage().read(key: _tokenKey); } Future<void> syncToWebView(InAppWebViewController controller) async { final token = await getToken(); if (token != null) { // 使用加密方式传输到WebView final encrypted = _encryptToken(token); await controller.evaluateJavascript( source: "window.__secureToken = '$encrypted';" ); } } }

跨平台兼容性处理

不同平台的WebView实现有所差异，我们需要统一的接口：

abstract class WebViewTokenBridge { Future<void> injectToken(String token); Future<String?> extractToken(); Future<void> clearToken(); } class UniversalTokenBridge implements WebViewTokenBridge { final InAppWebViewController controller; UniversalTokenBridge(this.controller); @override Future<void> injectToken(String token) async { await controller.evaluateJavascript( source: """ (function() { if (window.secureTokenStorage) { window.secureTokenStorage.setToken('$token'); } })(); """ ); } }

性能优化实战技巧

请求合并与批处理

对于高频的小请求，我们可以通过批处理来提升性能：

class RequestBatcher { final List<RequestOptions> pendingRequests = []; Timer? _batchTimer; void addToBatch(RequestOptions options) { pendingRequests.add(options); if (_batchTimer == null) { _batchTimer = Timer(const Duration(milliseconds: 100), _sendBatch); } Future<void> _sendBatch() async { if (pendingRequests.isEmpty) return; final batchData = pendingRequests.map((req) => { 'url': req.path, 'method': req.method, 'data': req.data, }).toList(); final result = await dio.post( '/batch', data: batchData, ); // 处理批量响应 _handleBatchResponse(result.data); pendingRequests.clear(); _batchTimer = null; } }

智能缓存策略

结合dio的缓存拦截器，我们可以实现更智能的缓存管理：

dio.interceptors.add( CacheInterceptor( options: CacheOptions( store: HiveCacheStore(), policy: CachePolicy.forceCache, maxStale: const Duration(days: 1), ), ), );