Flutter WebView加载本地html的问题

最近项目中，用到了flutter中的webview加载带有echarts控件的html文件，但是发现图表一直无法显示，通过查询相关资料，分析apk包文件，知道了是由于flutter项目中的文件打包后的路径发生变化，造成找不到相关依赖，特此记录一下，使用下面这个方法便可以解析出Android和IOS打包后的apk中资源文件的实际位置。

///获取打包后的资源文件实际路径
///如assets/files/index.html
String getAssetsPath(String path) {
  if (defaultTargetPlatform == TargetPlatform.android) {
    return 'file:///android_asset/flutter_assets/' + path;
  } else {
    return 'file://Frameworks/App.framework/flutter_assets/' + path;
  }
}

例如，你的资源文件是在flutter项目的根目录下的 'assets/files/echart-pie.html',
那 'getAssetsPath('assets/files/echart-pie.html')'才是打包成apk后，资源文件的实际路径。

image.png

按照上面的操作，你会发现在android设备上已经可以正常显示本地html页面了，但是IOS设备上还是一脸懵逼；不要慌，这块是由于webview_flutter本来就不支持加载本地文件，这时我们还需要修改下插件IOS部分的源码，FlutterWebView.m文件：

image.png

- (bool)loadUrl:(NSString*)url withHeaders:(NSDictionary<NSString*, NSString*>*)headers {
    NSURL* nsUrl = [NSURL URLWithString:url];
    if (!nsUrl) {
        return false;
    }
    NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:nsUrl];
    [request setAllHTTPHeaderFields:headers];

    //判断url的加载方式
    if([url hasPrefix:@"http"]) {
        [_webView loadRequest:request];
    }else{
        // 我自己项目中传过来的路径中含有@"file://"，所以需要替换为空，实际应以当前项目为主
        url = [url stringByReplacingOccurrencesOfString:@"file://" withString:@""];
        if (@available(iOS 9.0, *)) {
            NSURL *findUrl = [NSURL fileURLWithPath:[NSString stringWithFormat:@"%@/%@", [[NSBundle mainBundle] bundlePath], url]];

            [_webView loadFileURL:findUrl allowingReadAccessToURL:[findUrl URLByDeletingLastPathComponent]];
        } else {
            // Fallback on earlier versions
            NSLog(@"webview_flutter:  loadFileUrl error");
        }
    }
    return true;
}

通过以上骚操作，就可以实现webview_flutter在android和ios设备上加载本地html文件了。

最后：推荐一个插件，已经在官方的基础上进行了优化
webview_flutter_plus

最后编辑于：2020.09.15 13:41:17