前言

Flutter作为壳，以WebView的形式加载web应用，需要用到或多或少的相互发消息，涉及到JS与原生的互相发消息~

Vue向Flutter发送消息

Vue端，使用postMessage实现，直接在Vue代码中需要向原生发送消息的地方添加，代码如下：

1
2
3
/// methodName：即桥接的方法名，在Flutter端的JavaScriptChannel中的name一致
/// message：桥接携带的消息，Flutter端在onMessageReceived回调中接收Message时解析，
methodName.postMessage('message')

Flutter端，通过JavascriptChannel回调接收JS端传过来的消息，代码如下：

1
2
3
4
5
6
7
JavascriptChannel(
    name: 'methodName',  // 与JS端一致的方法名
    onMessageReceived: (message) {
  		// message.message即为JS端传过来的消息内容，采用字符串格式，如果是JSON字符串，需自行解析
      print('message: ${message.message}');
    });
}

Flutter向Vue发送消息

Flutter端，使用evalJavascript实现，代码如下：

1
2
3
/// webviewPlugin：为使用的三方库，此处为flutter_webview_plugin实例
/// methodName(param)：与Vue中挂载一致的的方法名，应该可以带参数(字符串？)，暂时还没用过
webviewPlugin.evalJavascript("methodName(param)");

Vue端，定义与Flutter端一致的方法，并在mounted()中挂载该方法，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
mounted() {
    // ... 其他代码 ...
  
    /// 挂载Flutter原生应用方法
    window.methodName = this.methodName;
}

methods: {
    /// 定义与Flutter原生应用一致的方法，接收Flutter传来的消息
    methodName(param) {
      // ... 逻辑代码 ...
    }
}