Flutter js 相互（调用）通信

应用场景：

在Flutter 中显示一个网页（H5之类），然后在Flutter中可以调用网页js里的方法； js里也可以调用 Flutter
中的方法。这样就可以相互通信，方便一些功能的实现。

在Flutter中显示一个网页一般我们借助于官方提供的 webview_flutter 这个插件。

要想Flutter与js相互通信也是要借助于这个插件中的 JavascriptChannel。 我们也知道Flutter 在和android通信的时候是借助于MethodChannel，这两个蛮像的。

在说具体的调用方法之前先说一下WebView中几个关键的方法
1）onWebViewCreated 这个方法在webView 创建完成时调用，只会被调用一次 ，返回的参数是WebViewController 。 后面我们Flutter调用js方法的时候就会用到这个 WebViewController。
2）onPageFinished 这个方法在页面加载完成时调用， 在里边可以通过 WebViewController 来调用 js
调用方式 ： _webViewController.evaluateJavascript("js 方法名").then((res){
// 这个res 是js方法的返回值
});

1. Flutter中调用Js里定义的方法 (Flutter 调 js )
   // 这个showMessage 是在js中定义的方法，这个方法的返回值是true

// _controller就是WebViewController 
_controller?.evaluateJavascript("showMessage('This message is from Flutter!')").then ((res)  {
  print ("evaluateJavascript-res: ${res}"); // evaluateJavascript-res: true 
});

2. Js 中发消息给Flutter（js调Flutter )
   // 下面这段代码是js中的一个方法

function sendMessage (message ) {
    // 这个MessageDeal是和Flutter里JavascriptChannel中的name一致的。
    // 不用自己确切的定义，只要Flutter和js里保持一样就可以
    // 这里我最开始看这个的时候一直没搞懂MessageDeal是什么，后来敲了一遍代码终于明白了， 
    // 这个其实和MethodChannle中的channel字符串有类似的意思，唯一标识
    MessageDeal.postMessage(message);  // 关键
    document.getElementById ("content2").innerHTML = message;
} 

完整的代码 ：
js端：

    
    
    



Flutter发送过来的消息是： test
我发送给Flutter的消息是：test2

send a message to Flutter

Flutter端：
在本地测试的时候， 可以用上边的Html文件，然后用http-server在html文件所在目录开启一个本地的服务，这样就可以通过http://你的ip:8080/demo.html来访问你的html文件来测试了。 没有http-server这个的可以去安装一下，用这个还是还方便的。 【安装http-server: npm i http-server -g 】

 WebView(
  key: key,
  javascriptMode: JavascriptMode.unrestricted,
  initialUrl: url, // 网页地址： "http://172.18.230.138:8080/demo.html";
  onWebViewCreated: (controller) {
    _controller = controller;
  },
  navigationDelegate: (NavigationRequest request) {
    var url = request.url;  
    setState(() {
      isLoading = true; // 开始访问页面，更新状态
    });
    return NavigationDecision.navigate;
  },
  onPageFinished: (url) { 
    _controller?.evaluateJavascript("showMessage('This message is from Flutter!')").then ((res)  {
      print ("evaluateJavascript-res: ${res}");
    }); 
  },
  javascriptChannels: [
    JavascriptChannel(
        name: "MessageDeal",
        onMessageReceived: (JavascriptMessage message) {
          // 这里接收到的就是 js 中发送过来的message。 和js里MessageDeal.postMessage(message) 中的message 对应 。
          // 可以根据message来做一些相应的处理 
          print("${message.toString()},  ${message.hashCode}, message: ${message.message}") ;
          // 收到消息后回复一个消息给js那边
          _controller?.evaluateJavascript("showMessage ('我（Flutter）收到了你的消息[${message.message}].)");
        }),
  ].toSet(),
)

如上， 简单的js发消息给flutter , flutter调js方法就说完了 。 仅记录学习。