Methods of interacting with Android and IOS by vue

Program background

• IOS uses jsBridge plug-in to implement calls, argument transfers, and callbacks.
• Android is mount method and mount callback in window

IOS implementation solution

Calling native methods encapsulation as follows

function setupWebViewJavascriptBridge (callback) {
  if () {
    return callback()
  }
  if () {
    return (callback)
  }
   = [callback]
  let WVJBIframe = ('iframe')
   = 'none'
   = 'https://__bridge_loaded__'
  (WVJBIframe)
  setTimeout(() => {
    (WVJBIframe)
  }, 0)
}
function callhandler (name, data, callback) {
  setupWebViewJavascriptBridge(function (bridge) {
    (name, data, callback)
  })
}

The actual call is as follows

callhandler(functionName: string, params: object, res => {})

Register method to native

registerhandler (name, callback) {
  // Android  window[name] = res => {
   let data = (res)
   callback(data)
  }
  // IOS
  setupWebViewJavascriptBridge(function (bridge) {
    (name, function (data, responseCallback) {
      callback(data, responseCallback)
    })
  })
}

Android implementation solution

Call native methods

window.HTTP_TEST.functionName()

Define callback method/register method to native

window['functionName'] = res => {}

Special Instructions

1. Android's parameter passing in interaction can only support string type, and object parameters must be converted into string pass
2. Because the callback method name of Android is fixed, when the same method requests more than twice at the same time, it is possible to get only one callback. If you use random numbers to process it, you will constantly mount new functions on the window. Too many calls may cause problems, so you can avoid requesting the same method at the same time to solve it. If there is a need that cannot be avoided, it still needs to be solved with random numbers.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.