flutter开发实战-inappwebview实现flutter与Javascript方法调用

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
 
class MyInAppWebViewPage extends StatefulWidget {
  @override
  _MyInAppWebViewPageState createState() => new _MyInAppWebViewPageState();
}
 
class _MyInAppWebViewPageState extends State<MyInAppWebViewPage> {
 
  InAppWebViewController webView;
  String url = FlutterInAppWebViewExampleRoutes.javascriptCallChannel;
 
  @override
  void initState() {
    super.initState();
  }
 
  @override
  void dispose() {
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                  child: InAppWebView(
                    initialUrl: url,
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                        inAppWebViewOptions: InAppWebViewOptions(
                            javaScriptEnabled: true,
                        )
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {
                    },
                    onLoadStop: (InAppWebViewController controller, String url) {
                      controller.evaluateJavascript(source: """
                        var button = document.getElementById('button');
                        button.addEventListener('click', function() {
                          callFlutterFunction('Hello, Flutter!');
                        });
                      """);
                    },
                  )
              ),
            ])
        )
    );
  }
}

这个代码实例展示了如何在Flutter应用中使用flutter_inappwebview插件来创建一个InAppWebView，并在WebView创建后，通过onLoadStop回调来注册一个JavaScript函数，该函数会监听页面上ID为button的元素的点击事件，并在点击发生时调用callFlutterFunction方法。这里的callFlutterFunction是一个JavaScript函数，它是由Flutter提供并由JavaScript调用，用于在Flutter端执行相关逻辑。