1吩蔑、導入庫

webview_flutter

2邓了、iOS 單獨設置

ios/Runner/Info.plist中添加

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>*

3抵栈、Flutter webview的使用

child: WebView(
                key: key,
                javascriptMode: JavascriptMode.unrestricted,
                initialUrl: widget.url,
                onWebViewCreated: (controller) {
                  _controller = controller;
                },
                navigationDelegate: (NavigationRequest request) {
                  var url = request.url;
                  setState(() {
                    isLoading = true; // 開始訪問頁面夕吻，更新狀態(tài)
                  });
                  return NavigationDecision.navigate;
                },
                onPageFinished: (url) {
                  _controller.evaluateJavascript("document.title").then((result){
                    setState(() {
                      _title = result;
                      isLoading = false; // 頁面加載完成，更新狀態(tài)
                      print("finish");
                    });
                  }
                  );
                },
                javascriptChannels: <JavascriptChannel>[
                  JavascriptChannel(
                      name: "close",
                      onMessageReceived: (JavascriptMessage message) {
                        ATJump.jumpToInvitation();
                      }),
                ].toSet(),
              ),

javascriptMode: JavascriptMode.unrestricted:允許和js交互

4菩暗、Flutter 調用JS的方法

4.1、flutter端代碼實現

_controller.evaluateJavascript("flutterCallJsMethod('message from Flutter!')”);

4.2旭蠕、JS端代碼實現

function flutterCallJsMethod(message) {
    document.write(message);
}

5停团、JS 調用Flutter

5.1、flutter端代碼實現

javascriptChannels: <JavascriptChannel>[
  JavascriptChannel(
      name: "close",
      onMessageReceived: (JavascriptMessage message) {
        print("========================================= ");
        print(message.message);
        appClose();
      }),
].toSet(),

5.2掏熬、JS端安卓設備實現

//安卓方式 JS調用原生
close.postMessage({"key1":"100","key2":"200"});

5.3佑稠、JS端iOS設備實現

        //wkWebView JS調用iOS原生
        window.webkit.messageHandlers.close.postMessage({"key1":"100","key2":"200"});
        //UIWebView JS調用iOS原生
<!--   close({"key1":"100","key2":"200"});-->