Flutter webView访问本地html，h5引入本地的js、css、等静态资源无效问题。

港控/mmm° 2023-03-02 04:58 4阅读 0赞

解决方案：

1、将所有静态资源放在服务器，所有静态资源访问服务器。可以实现。

2、本地起个webserver，然后访问html，可以实现。

第一种方案很简单，这里不讲，着重讲第二种实现方案。

1、需要的插件

> jaguar\_flutter\_asset: ^2.2.0    //开启本地服务器的插件
> 
> webview\_flutter: ^0.3.9  //官方webview插件

2、工程目录

![20200727183740311.png][]

3、配置pubspec.yaml。这里有个重点：每个目录都要配置。不管层级多深

![20200727183828213.png][]

4、代码

import 'package:flutter/material.dart';
    import 'package:webview_flutter/webview_flutter.dart';
    import 'package:jaguar/jaguar.dart';
    import 'package:jaguar_flutter_asset/jaguar_flutter_asset.dart';
    
    class WebViewLocal extends StatefulWidget {
      @override
      _WebViewLocalState createState() => _WebViewLocalState();
    }
    
    class _WebViewLocalState extends State<WebViewLocal> {
      @override
      void initState() {
        super.initState();
        _startService();
      }
    
      _startService() async {
        final server = Jaguar(address: "127.0.0.1", port: 8000);
        server.addRoute(serveFlutterAssets());
        await server.serve(logRequests: true);
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('享你来服务条款')),
          body: WebView(
            initialUrl: "http://127.0.0.1:8000/files/index.html",
            javascriptMode: JavascriptMode.unrestricted,
            onPageFinished: (String value) {},
            onWebViewCreated: (WebViewController webViewController) {},
          ),
        );
      }
    }

[20200727183740311.png]: /images/20230208/66c6c01cbb7f4093b7f21ba3b9393c21.png
[20200727183828213.png]: https://img-blog.csdnimg.cn/20200727183828213.png