flutter webview use and interact js-flutter

Article:
Flutter WebView interact with JS Layman's Guide to
use the official library: webview_flutter
learning can refer to the official demo: official libraries and demo of Github Address
Posts:
https://stackoverflow.com/questions/53689662/flutter-webview-two-way- communication

A supplement

1. Http load the page on iOS (https does not need), you need to add support for iOS-info.plist http, add the following to info.plist:

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

2. At the same time the official documentation but also to add in info.plist as follows:

<key>io.flutter.embedded_views_preview</key>
        <true/>

[email protected]

Supplementary two

As noted earlier:

Method One: Use routing commissioned navigationDelegate intercept url

Intercept in navigationDelegate

navigationDelegate: (NavigationRequest navigation) {
                String url = Uri.decodeFull(navigation.url);
                logPrint(url, message: "js调用flutter传递的内容：");
                if (url.startsWith("moka://")) {
                  // 拦截后执行操作
                  List<String> queryList = url.split("?");
                  if (queryList.length > 1) {
                    String query = queryList[1];
                    logPrint(json.decode(query), message: "query");
                    JsActionModel jsActionModel =
                        JsActionModel.fromJson(json.decode(query));
                    _iosAction(jsActionModel);
                  }

                  // {"method":"toLogin", "param": "rate", "page": "pagevalue"}

                  logPrint('blocking navigation to $navigation');
                  return NavigationDecision.prevent; // 阻止路由替换
                }
                logPrint('allow navigation to $navigation');
                return NavigationDecision.navigate; // 允许路由替换
              },

    // JS调用Flutter：使用路由委托navigationDelegate拦截url
    void _iosAction(JsActionModel model) {
      if (model.page != null && model.page.length != 0) {
        // 跳转页面
        logPrint(model.page, message: "model.page");
        return;
      }
      if (model.method != null && model.method.length != 0) {
        logPrint(model.method, message: "model.method");

        // 执行对应的方法
        if (model.method == "toLogin") {
          // 调用登录
          Navigator.of(context)
              .push(CupertinoPageRoute(builder: (BuildContext context) {
            return new LoginPage();
          }));
        }
        if (model.method == "") {
          // 调用其他方法

        }
        return;
      }
    }

Option two: Send message javascriptChannels

Cons: js method call seems to have is the postMessage
(I'm not sure here, there is to know the trouble to inform, thank you)
in which the method is invoked in the js:
WebViewJavascriptBridge.postMessage('Hello World');

javascriptChannels: <JavascriptChannel>[
                // 使用javascriptChannels发送消息
                _callPageJavaScriptChannel(context),
              ].toSet(),

    // js直接调用方法打开页面
    JavascriptChannel _callPageJavaScriptChannel(BuildContext context) {
      return JavascriptChannel(
        name: "WebViewJavascriptBridge",
        onMessageReceived: (JavascriptMessage message) {
          logPrint('${message.message}');
          callPage(message.message);
        },
      );
    }