vue项目可以使用WebViewJavascriptBridge与ios和Android交互。搜了一下找到了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)

          })

      })

  }

}

在 main.js 中引入该文件

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

Vue.prototype.$bridge = Bridge

在需要调用客户端方法的组件中(事先需要与客户端同事约定好方法名)

this.$bridge.callhandler('ObjC Echo', params, (data) => {

  // 处理返回数据

})

当客户端需要调用 js 函数时,事先注册约定好的函数即可

 

this.$bridge.registerhandler('JS Echo', (data, responseCallback) => {

    alert('JS Echo called with:', data)  responseCallback(data)

})

以上来自:
作者:w_zhuan
链接:https://www.jianshu.com/p/0dcb9699b703
来源:简书

但是在应用过程中发现还是有些问题,connectWebViewJavascriptBridge没有被调用导致收不到客户端传过来的数据。

所以加了一段调用它的:

connectWebViewJavascriptBridge(function(bridge) {

    bridge.init(function(message, responseCallback) {

        bridgeLog('默认接收收到来自Java数据: ' + message);

        var responseData = '默认接收收到来自Java的数据,回传数据给你';

        responseCallback(responseData);

    });

})

ok,解决。

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐