flutter webview 与 前端vue通信

flutter有3个比较好的webview插件

• webview_flutter : 是官方维护的 WebView 插件，特性是基于原生和 Flutter SDK 封装，继承 StatefulWidget，因此支持内嵌于 flutter Widget 树中，这是比较灵活的；
• flutter_webview_plugin : 基于原生 WebView 封装的 Flutter 插件，将原生的一些基本使用 API 封装好提供给 Flutter 调用，因此并不能内嵌于 Flutter Widget 树中，因此在界面的跳转必须得先释放掉，返回后又要重新初始化，所以显示会有很多限制性；
• flutter_inappwebview : 基于原生和 Flutter SDK 封装

/// 使用 webview_flutter package
  Widget _buildWebview() {
    /// 使用SizeBox包裹, 可以在页面中部分显示
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      height: 500,
      child: WebView(
        /// 加载本地文件使用 file://开头，例如: file://xxxx/xxx/xxx/html
        initialUrl: url,
        debuggingEnabled: true,
        javascriptMode: JavascriptMode.unrestricted,
        javascriptChannels: Set.from([
          _toastJavascriptChannel(context),
        ]),
        onWebViewCreated: (WebViewController webViewController) {
          _webViewController = webViewController;
        },
        onPageFinished: (url) {
          String _testData =
              "https://www.baidu.com";
          String script = "forFlutterInit('$_testData')";
          // flutter 调用页面的方法
          	_webViewController?.evaluateJavascript(script)?.then((result) {
            print('callJSFunc has called: $result');
          });
        },
      ),
    );
  }
  // 往h5 window 里面插入全局方法 Toaster
  JavascriptChannel _toastJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
      name: 'FlutterToast',
      onMessageReceived: (JavascriptMessage jsMsg) {
        print(jsMsg.message);
      },
    );
  }

 /// 使用 flutter_inappwebview 
  InAppLocalhostServer localhostServer =  InAppLocalhostServer();
  
  Future _initLocalServe() async {
    await localhostServer.start();
  }
 
  @override
  void initState() {
    super.initState();
    _initLocalServe();
  }
  
  @override
  void dispose() {
  
    localhostServer.close();
    super.dispose();
  }
  
  
  Widget _buildInappWebview() {
    return InAppWebView(
      initialUrl: "http://localhost:8080/assets/webview/dist/index.html",
      initialHeaders: {},
      initialOptions: InAppWebViewWidgetOptions(
        inAppWebViewOptions: InAppWebViewOptions(
          debuggingEnabled: true,
          // useShouldOverrideUrlLoading: true,
          // useOnLoadResource: true,
        ),
      ),
      shouldOverrideUrlLoading:
          (InAppWebViewController controller, String url) {},
      onWebViewCreated: (InAppWebViewController controller) {
        print("onWebViewCreated");
        webView = controller;
      },
      onLoadStart: (InAppWebViewController controller, String url) {
        print("onLoadStart: $url");
        setState(() {
          this.url = url;
        });
      },
      onLoadStop: (InAppWebViewController controller, String url) {
        print("onLoadStop: $url");
        setState(() {
          this.url = url;
        });
      },
      onProgressChanged: (InAppWebViewController controller, int progress) {
        print(progress / 100);
        setState(() {
          this.progress = progress / 100;
        });
      },
    );
  }

  /// 使用 flutter_webview_plugin  
  Widget _buildWebviewScaffold() {
    return WebviewScaffold(
      url: "https://www.baidu.com",
      withZoom: true, //是否可以缩放
      withLocalStorage: true, //是否启用缓存
      hidden: false, //默认状态下是否隐藏
      initialChild: Container(
        color: Colors.white,
        child: Center(child: Text('loading...')),
      ),
      // appBar: new AppBar(title: Text("webview")),
      key: _scaffoldKey,
    ); //等待加载过程的界面
  }

------ 如果文章对你有用，感谢右上角 >>>点赞 | 收藏 <<<