前端vue与App Flutterr交互

萝卜砸大坑

于 2020-08-06 16:49:02 发布

阅读量1.4w

点赞数

分类专栏： web 前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45266125/article/details/107843925

版权

web 前端专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了在Flutter应用中与前端进行数据交换的方法，包括如何使用postMessage进行跨平台消息传递，以及针对不同操作系统的适配策略。适用于希望增强跨平台应用功能的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

博客地址：http://www.globm.top/blog/1/detail/47
前端与flutter的交互相对于原生app更简单，这里做下记录，以便下次使用：

//* @param {Object} objVal 要传递的数据
let objVal = {}
objVal = JSON.stringify(objVal)
window[funcName].postMessage(objVal)

没错，就是这么简单，顺便贴一下原生的交互吧：

methods: {
    match () {
      const u = navigator.userAgent
      return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    },
    // transmitData
    async handleWebFunc (funcName, objVal = {}) {
      const isIOS = await this.match()
      objVal = JSON.stringify(objVal)
      if (isIOS) {
        window.webkit.messageHandlers[funcName].postMessage(objVal)
      } else {
        window[funcName].postMessage(objVal)
        window.AndroidWebView[funcName](objVal)
        window.Android[funcName](
          JSON.stringify(objVal)
        )
      }
    }
  }