混合开发app与webview层通信之vue端通信总结_vue webview通信

混合开发app与webview层通信之vue端通信总结

1.需求背景

• 最近原生的app项目使用了混合开发，混合开发最大的难点在于原生app端与webview端之间的通信，以及两端之间的数据传输。

2.解决方案

• 两端之间通信方案最常用的有三种：1.通过url（只能app到webview，参数数据量有限制）；2.通过window暴露（只能webview到app，不能传参）；3.通过JsBridge（双向，参数无限制，推荐DSBridge）。 通过JsBridge，Web端可以调用Native端的Java接口，同样Native端也可以通过JsBridge调用Web端的JavaScript接口，实现彼此的相互调用。下面主要介绍第三种方式jsBridge 。步骤如下：

• 1.新建jsBridge.js 文件，通过WebViewJavascriptBridgeReady封装如下：

• 
  // 自定义JS注册事件监听 connectWebViewJavascriptBridge 方法名可改
  function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
      callback(window.WebViewJavascriptBridge)
    } else {
      document.addEventListener(
        'WebViewJavascriptBridgeReady',
      () => {
          callback(window.WebViewJavascriptBridge)
        },
        false,
      )
    }
  }
  
  // 注册回调函数，第一次连接时调用 初始化函数 connectWebViewJavascriptBridge和上面一致
  connectWebViewJavascriptBridge((jsbridge) => {
    // 初始化 必须有 Android 通过 JSBridge 调用 默认JS bridge.init bridgeWebView.send调用
    jsbridge.init((message, callback) => {
      callback({ 'Javascript Responds': 'Android调用JS初始化方法!' })
    })
  })
  
  export default {
    registerHandler(name, fun) {
      connectWebViewJavascriptBridge((jsbridge) => {
        // Android调用js方法：functionInJs方法名称需要保持一致 ，并返回给Android通知
        jsbridge.registerHandler(name, (data, responseCallback) => {
          responseCallback(fun(data))
        })
      })
    },
    callHandler(name, data, fun) {
      connectWebViewJavascriptBridge((jsbridge) => {
        // JS调用Android方法：接收Android传递过来的数据，并做处理
        // eslint-disable-next-line no-shadow
        jsbridge.callHandler(name, data, (data) => {
          fun(data)
        })
      })
    },
  }
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44

• 2.进入需要通信的vue页面：

• 
  // 实例：
  <script>
  import { onMounted, ref } from 'vue'
  import jsBridge from '@/utils/jsBridge' // 引入jsBridge
  
  export default {
    setup() {
      const getData = () => {
        // webview 触发 app 内部设定好的方法get_app_data，触发完成会有回调接收结果
        jsBridge.callHandler('get_app_data', { param: '这是JS传递给app的数据' }, (data) => {
          console.log('js获取到app的数据', data)
        })
      }
  
      onMounted(() => {
        // webview 监听app触发web_sport_init，进行监听接收数据
        jsBridge.registerHandler('web_sport_init', (data) => {
          console.log('js获取到app的数据', data)
        })
      })
  
      return {
        getData,
      }
    },
  }
  </script>
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29

• 到此，通信就成功了。