h5与app进行双向通信

1.webview_flutter 与H5交互

      flutter代码

vue代码

<template>
 <div>
      获取到的Flutter传入信息： <span>{{ infoFromFlutter }}</span>
</div>
</template>
<style scoped>
</style>

<script>
export default {
  name: "flutter",
  data: function() {
    return {
      infoFromFlutter: "",
    };
  },
  mounted: function() {
  //将getInfoFromFlutter（）方法挂载到window以供给Flutter调用
    window["getInfoFromFlutter"] = info => {
      this.getInfoFromFlutter(info);
    };
	getInfoFromVue.postMessage("Hello,Flutter");
  },
  methods: {
    getInfoFromFlutter(info) {
     this.infoFromFlutter = info;
    }
  }
};
</script>

2.基于vue的h5与android 和ios交互过程

   1.H5调用客户端的方法；

  2.客户端调用H5的方法并且传递给h5方法所需要的参数；

   H5调用客户端的方法代码如下（需要区分是ios还是android）

// 获取androidJs
export function getAndroidInfo() {
  window.AndroidWebView.reLogin()
}
// 获取iosJs
export function getIosInfo() {
  window.webkit.messageHandlers.reLogin.postMessage(null)
}

 reLogin即使客户端方法，我在项目中的用途是（// h5页面部分，同一个账号在不同的终端登录，用户被顶下去的时候，h5调用客户端js,通知客户端）

import { getMachine } from '@/utils/machine'
import { getIosInfo, getAndroidInfo } from '@/interaction/chargeLogin'

// response 拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 0) {
      // h5页面部分，同一个账号在不同的终端登录，用户被顶下去的时候，h5调用客户端js,通知客户端
      var machineType = getMachine()
      // 103000对应请重新登录
      if (res.code === 103000) {
        // ios与android调用方法不同，所以要获得设备类型
        if (machineType === -1) {
          getIosInfo()
        } else {
          getAndroidInfo()
        }
      }
      Toast(res.msg)
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    Toast('网络错误')
    return Promise.reject(error)
  }

最后，在Widget销毁之前将flutterWebViewPlugin 销毁掉。