PHP,JAVA,WEB分享-博客吧

vue项目如何使用WebViewJavascriptBridge进行APP与H5交互

       工作中有时会遇到APP里嵌入H5页面,这就需要H5和APP端进行交互,除了返回按钮有的还涉及到一些逻辑性的交互,还涉及到传参,这就需要WebViewJavascriptBridge技术。下面我介绍怎么在 vue 项目中使用 WebViewJavascriptBridge。

   1.创建 src/config/bridge.js 文件,用于封装 WebViewJavascriptBridge;

      2.bridge.js文件内容如下:

       function setupWebViewJavascriptBridge (callback) {

          if (window.WebViewJavascriptBridge) {

            return callback(window.WebViewJavascriptBridge)

          }

          if (window.WVJBCallbacks) {

            return window.WVJBCallbacks.push(callback)

          }

          window.WVJBCallbacks = [callback]

          let WVJBIframe = document.createElement('iframe')

          WVJBIframe.style.display = 'none'

          WVJBIframe.src = 'https://__bridge_loaded__'

          document.documentElement.appendChild(WVJBIframe)

          setTimeout(() => {

            document.documentElement.removeChild(WVJBIframe)

          }, 0)

          }

       export default {

         callhandler (name, data, callback) {

           setupWebViewJavascriptBridge(function (bridge) {

           bridge.callHandler(name, data, callback)

         })

       },

       registerhandler (name, callback) {

        setupWebViewJavascriptBridge(function (bridge) {

        bridge.registerHandler(name, function (data, responseCallback) {

         callback(data, responseCallback)

        })

       })

      }

     }

   3.在具体页面中引入bridge.js文件:

   import Bridge from './config/bridge.js';

 4.如果APP端调用H5页面方法,在mounted调用某个方法,里面主要是WebViewJavascriptBridge中registerhandler

   方法:如果是H5调用App方法直接在方法里调用WebViewJavascriptBridge中的callhandler