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

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值