Question

是否有可能从本地资产加载完整的网站（包括相关文件）？我用Flutter插件webview_flutter进行了尝试，并加载了index.html。

  Future<String> loadLocal() async {
    return await rootBundle.loadString('assets/mywebsite/index.html');
  }

仅呈现html代码，并且相关的javascript无法正常工作。

Answer 1

您可以关注https://github.com/flutter/flutter/issues/27086

同时，您可以在Dart中实现一个Web服务器，该服务器提供资产中的文件并将Web视图指向该集成Web服务器。

https://medium.com/@segaud.kevin/facebook-oauth-login-flow-with-flutter-9adb717c9f2e关于如何在Dart中做到这一点。

Answer 2

您可以使用我的插件flutter_inappwebview，它是Flutter插件，允许您添加内联WebView或打开应用程序内浏览器窗口，并具有许多事件，方法和选项来控制WebView。 / p>

要从资产加载完整的网站，您需要在pubspec.yaml文件中声明相应的文件：

...

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  assets:
    - assets/index.html
    - assets/page-1.html
    - assets/page-2.html
    - assets/js/
    - assets/css/
    - assets/images/

...

然后，您可以使用index.html小部件的initialFile参数加载InAppWebView文件：

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                    initialFile: "assets/index.html",
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) {

                    },
                    onConsoleMessage: (InAppWebViewController controller, ConsoleMessage consoleMessage) {
                      print(consoleMessage.message);
                    },
                  ),
                ),
              ),
            ]))
    );
  }
}

在您的index.html中，您将看到类似的内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- this is a css file inside the assets folder -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- this is a javascript file inside the assets folder -->
    <script src="js/main.js"></script>
</body>
</html>

Answer 3

我已经能够做到这一点，但它仅在Android中有效。我已经通过以下方式使用了InAppWebView库：

 child: Container(
              child: InAppWebView(
                initialFile: "images/test.html",
                initialHeaders: {},
                onWebViewCreated: (InAppWebViewController controller) {
                  webView = controller;
                },
                onLoadStart: (InAppWebViewController controller, String url) {},
                onLoadStop: (InAppWebViewController controller, String url) {},
                onConsoleMessage: (InAppWebViewController controller,
                    ConsoleMessage consoleMessage) {
                  print(consoleMessage.message);
                },
              ),
            ),

包含相关文件的html文件已添加到项目资产中。

如何从资产加载完整的网站？

3 个答案: