WebViewJavascriptBridge封装

作者: bkbtp 分类: 前端 发布时间: 2018-04-12 16:22

什么时候需要用到WebViewJavascriptBridge

进行hybrid开发时,不可避免的会碰到h5页面与原生进行交互。这时候就轮到WebViewJavascriptBridge出场了,它可以让你能够在原生应用中调用h5页面中的Javascript方法,反过来也可以在Javascript中调用原生方法。

将WebViewJavascriptBridge封装进vue项目

  1. 新建bridge.js文件
function setupWebViewJavascriptBridge(callback) {
  var bridge = window.WebViewJavascriptBridge || window.WKWebViewJavascriptBridge
  if (bridge) { return callback(bridge) }
  var callbacks = window.WVJBCallbacks || window.WKWVJBCallbacks
  if (callbacks) { return callbacks.push(callback) }
  window.WVJBCallbacks = window.WKWVJBCallbacks = [callback]
  if (window.WKWebViewJavascriptBridge) {
    // for https://github.com/Lision/WKWebViewJavascriptBridge
    window.webkit.messageHandlers.iOS_Native_InjectJavascript.postMessage(null)
  } else {
    // for https://github.com/marcuswestin/WebViewJavascriptBridge
    var WVJBIframe = document.createElement('iframe')
    WVJBIframe.style.display = 'none'
    WVJBIframe.src = 'https://__bridge_loaded__'
    document.documentElement.appendChild(WVJBIframe)
    setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
  }
}

export default {
  callhandler(name, params, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler(name, params, callback)
    })
  },
  registerhandler(name, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.registerHandler(name, function (data, responseCallback) {
        callback(data, responseCallback)
      })
    })
  }
}
  1. main.js中引入,将bridge注册为全局方法
import Bridge from 'components/bridge/bridge.js'
Vue.prototype.$bridge = Bridge
  1. js调用原生方法(事先需要与客户端同事约定方法名要统一)
this.$bridge.callhandler('submitFromWeb', params, (data) => {
  console.log(data)
})
  1. 客户端调用js(事先需要与客户端同事约定方法名要统一)
this.$bridge.registerhandler('functionInJs', (data, responseCallback) => {
  responseCallback(data)
})

参考文档

WebViewJavascriptBridge官方文档

WebViewJavascriptBridge for android

JsBridge官方文档

无论是ios或者android端,重定向地址只可到端口,后面不可拼接二级地址或者参数,否则js无法接收原生传值

发表评论

电子邮件地址不会被公开。 必填项已用*标注

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。