Flutter WebView 和JavaScript 交互

flutter官方并没有提供WebView组件，不过官方的plugin库给我们提供了webview_flutter插件，集成到我们的项目中就可以使用了

一、集成

在项目的pubspec.yaml文件中添加一下代码
webview_flutter: ^0.3.19+6

二、简单使用

var webUrl ="http://192.168.10.120:8081/test.html?time=${DateTime.now()};
return Scaffold(
    appBar: AppBar(title: Text('WebView')),
    body: Builder(builder: (BuildContext context) {
      return WebView(
        initialUrl: webUrl,
        onWebViewCreated: (WebViewController controller) {
          _controller = controller;
        },
        onPageStarted: (String url) {},
        onPageFinished: (String url) {},
      );
    }));
    }

三、Js 调用Flutter(两种方法)

方法一、使用javascriptChannels发送消息

• Flutter代码

• 定义javascriptChannels JavascriptChannel方法中的两个参数，name是和js协商的标记，onMessageReceived当js收到Flutter发送的消息时的回调

    JavascriptChannel _alertJavascriptChannel(BuildContext context) {
        return JavascriptChannel(
                name: 'MyApp',
                onMessageReceived: (JavascriptMessage message) {
                //js 收到了Flutter发送的消息
                showToast(message.message);
              });
        }
        
    WebView(
    javascriptChannels: <JavascriptChannel>[
        _alertJavascriptChannel(context),
    ].toSet(),
  

• js代码

    <button onclick="callFlutter()">callFlutter</button>
        function callFlutter(){
        // MyApp为Flutter定义的name
        MyApp.postMessage("JS调用了Flutter");
    }
  

方法二、使用路由委托navigationDelegate拦截url

• Flutter代码 在Flutter端，我们就可以在navigationDelegate回调中拦截这个符合js://webviewscheme的路由地址了：

    navigationDelegate: (NavigationRequest request) {
        if (request.url.startsWith('js://html')) {
          showToast('JS调用了Flutter By navigationDelegate');
          print('blocking navigation to $request}');
          return NavigationDecision.prevent;  //阻止路由替换
        }
        print('allowing navigation to $request');
        return NavigationDecision.navigate; //允许路由替换
      },
  

• js代码

    <button onclick="callFlutter()">callFlutter</button>
    function callFlutter(){
    var url = "js://html?params1=111&params2=222"
    //url 为两端定义的协议
    document.location = url;
    }
  

四、Flutter 调用JS

• 在实际开发中免不了和js的数据交互，例如js需要拿到app登录的用户信息，这时候我们在Flutter端收到请求以后，可以通过拿到一个WebViewController，通过它的evaluateJavascript()方法，然后将我们的用户信息传递给js，具体代码如下：

• Flutter 代码

    onWebViewCreated: (WebViewController webViewController) {
    _controller = webViewController;
    },
    JavascriptChannel _alertJavascriptChannel(BuildContext context) {
        return JavascriptChannel(
                name: 'MyApp',
                onMessageReceived: (JavascriptMessage message) {
                showToast(message.message);
                // js 告诉Flutter需要获取用户信息
                if(message.messageType == "getUserInfo"){
                    //Flutter把用户信息传递到js
                    var userInfo = User("username","token");
                    String userString = json.encode(userInfo);
                    controller
                    ?.evaluateJavascript('getUserInfo($userString)')
                    ?.then((result) {
                        
                    });
                    }
              });
        }
  

• js 代码

    <button onclick="callFlutter()">获取用户信息</button>
    <script>
        function callFlutter() {
            // 我需要用户信息
            var str = navigator.userAgent;
            if (str.includes('MyApp')) { // 此处为Flutter端JavascriptChannel定义的name
                MyApp.postMessage(JSON.stringify({ method: "getUserInfo" }));
            } else {
                $('body').html('<p>hello world</p>');
            }
        }
  
        function getUserInfo(message) {
            var data = JSON.parse(JSON.stringify(message)) //注意此处json的解析方式
            document.getElementById("p1").textContent = data.userUid;
            document.getElementById("p2").textContent = data.username;
            document.getElementById("p3").textContent = data.userType;
            document.getElementById("p4").textContent = data.realName;
        }
    </script>
  

五、补充

• 在实际项目中，我们需要和js开发者定义交互的数据结构，例如：

  class JsBridgeModel {
      int type; //类型 例如 打开微信、获取用户信息等
      String message;
      var data;
  }
  
  JsBridgeModel(this.type,this.message,this.data);
  js端post发送消息的时候需要根据Flutter定义好的格式来
  XX.postMessage(JSON.stringify({ type: 1,message:"",data:{} }))
  

五、总结：

• Flutter和js交互的方式基本就是这样，如果你还有需要补充的可以在下方留言。