The current project is hybrid development. The H5 page will be embedded in the IOS client APP, so the interaction between H5 and IOS is involved. Here is a record of the interaction methods used in the project, focusing on WebViewJavascriptBridge.

H5 calls IOS, but no return is returned

One of the simplest interaction requirements in the project is that when the client opens the H5 page, there is a back button on the page to go back to the client page. This requirement cannot be achieved by the pure front end, which must call the IOS back method.

When an H5 page needs to call a method on IOS and does not need to obtain the return value, it is easy to use schema instead of third-party libraries. The specific methods are as follows:

  • The front-end and the client agree on a schema name, such as goback
  • Front end bylocation.href="goback://" 或 iframe.src="goback://"To initiate a request
  • The IOS server intercepts the GOback schema and performs the backward logic
  • If you need to pass parameters to the client, you can simply concatenate the parameters after the URL for the client to parse

Using WebViewJavascriptBridge

When the interaction between H5 page and IOS terminal is complicated, for example, the page needs to obtain the return value returned by IOS terminal, or the IOS terminal needs to invoke JS methods.

It can be achieved through third-party libraries. Our project uses WebViewJavascriptBridge. How do I use WebViewJavascriptBridge in a vue project

WebViewJavascriptBridge making address

  • Create a SRC /config/bridge.js file that encapsulates the WebViewJavascriptBridge

  • Copy the following code into the bridge.js file

    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)
      })
    })
  }
}Copy the code

  • Import this file in main.js

    import Bridge from './config/bridge.js'
Vue.prototype.$bridge = BridgeCopy the code

  • In components that need to call client-side methods (agree method names with client colleagues beforehand)

    This.$bridge. Callhandler ('ObjC Echo', params, (data) => {// return data})Copy the code

  • When the client needs to call JS functions, it can register the agreed functions in advance

    this.$bridge.registerhandler('JS Echo', (data, responseCallback) => {
  alert('JS Echo called with:', data)
  responseCallback(data)
})Copy the code