就目前移動端的生態(tài)來說颖杏，實現(xiàn)混合開發(fā)纯陨，無論是Android端，Ios端留储，跟webview的交互翼抠，互相調用基本都都必須的，當然了获讳，F(xiàn)lutter肯定也有與Js互相調用的方法阴颖，下面我們就來看看Flutter和Js互相調用吧

首先導入第三方框架

dependencies:
  flutter:
    sdk: flutter
  flutter_webview_plugin: ^0.3.5
  #  flutter_webview_plugin:
  #      path: ./../flutter_webview_plugin/
  #  flutter_webview_plugin:
  #      git:
  #      url: git://github.com/ChessLuo/flutter_webview_plugin.git

  webview_flutter: ^0.3.15+1 #flutter官方webview
  fluttertoast: ^3.0.4 #toast

下面看看使用示例

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:webview_flutter/webview_flutter.dart';
class FlutterWebView extends StatefulWidget {

  final String url="http://www.reibang.com/u/69da9353384e";
  final String barTitle="我的簡書";

//  const FlutterWebView({Key key, this.url, this.barTitle}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return WebViewState();
  }
}

class WebViewState extends State<FlutterWebView> with AutomaticKeepAliveClientMixin {

  String _webUrl;

  @override
  void initState(){
    super.initState();
    _webUrl = Uri.decodeComponent(widget.url);

    print("web url == $_webUrl");

  }

  ///js與flutter交互
  JavascriptChannel _alertJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'invoke',//invoke要和網(wǎng)頁協(xié)商一致
        onMessageReceived: (JavascriptMessage message) {
          print(message.message);

        });
  }

  ///組合腳本執(zhí)行方法，將數(shù)據(jù)發(fā)送給js端（flutter與js交互）
  void _onExecJavascript(String url) async {
    _controller.future.then((controller) {
      controller.loadUrl(url);
    });
    //或者 evaluateJavascript('callJS("js方法")')
  }

  final Completer<WebViewController> _controller = Completer<WebViewController>();

  bool _loading = true; //等待加載框



  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title:Text(widget.barTitle,),
          centerTitle: true,
        ),
        body: SafeArea(//設置安全區(qū)域 丐膝，不沉浸式
          top: true,
          child: Builder(builder: (BuildContext context) {
            return Stack(
              children: <Widget>[
                _showWebView(context),

                _loading
                    ? Center(child: CircularProgressIndicator(),)
                    :Container(),
              ],
            );


          }),
        )

    );
  }


  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;

  ///初始化webview顯示
  Widget _showWebView(BuildContext context) {
    return WebView(
      initialUrl: widget.url,///初始化url
      javascriptMode: JavascriptMode.unrestricted,///JS執(zhí)行模式
      onWebViewCreated: (WebViewController webViewController) {///在WebView創(chuàng)建完成后調用量愧，只會被調用一次
        //
        //
        _controller.complete(webViewController);
      },
      javascriptChannels: <JavascriptChannel>[///JS和Flutter通信的Channel；
        _alertJavascriptChannel(context),
      ].toSet(),
      navigationDelegate: (NavigationRequest request) {//路由委托（可以通過在此處攔截url實現(xiàn)JS調用Flutter部分）尤误；
        ///通過攔截url來實現(xiàn)js與flutter交互
        if (request.url.startsWith('js://webview')) {
          Fluttertoast.showToast(msg:'JS調用了Flutter By navigationDelegate');
//          print('blocking navigation to $request}');
          return NavigationDecision.prevent;///阻止路由替換，不能跳轉结缚，因為這是js交互給我們發(fā)送的消息
        }
        return NavigationDecision.navigate;///允許路由替換
      },
      onPageFinished: (String url) {///頁面加載完成回調
        setState(() {
          _loading = false;
        });
        print('Page finished loading: $url');
      },

    );
  }
}

常規(guī)的使用上面都有了损晤，朋友們可以運行下代碼試試就OK啦，注釋也寫得很清楚了