vue project WebViewJavascriptBridge adaptation android and ios

Foreword

 In recent native app pages of nested do Vue H5, mixed-use development, of course, native and interactive aspects of Vue used WebViewJavascriptBridge course this thing anymore.

 Of course there are problems when used, you can refer to the chiefs of the wording and then combine their writing, their own divisible by a suitable code

This is  https://github.com/marcuswestin/WebViewJavascriptBridge      this is WebViewJavascriptBridge description, do not understand can go and see it

The Code

1. Create src / utils / bridge.js file for packaging WebViewJavascriptBridge

//判断机型
let u = navigator.userAgent;

function setupWebViewJavascriptBridge(callback) {
  //var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  //判断ios 还是Android
  if (/(iPhone|iPad|iPod|iOS)/i.test(u)) {
    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)
  }
}

//安卓注册事件监听
function connectWebViewJavascriptBridge(callback) {
  if (window.WebViewJavascriptBridge) {
    callback(WebViewJavascriptBridge)
  } else {
    document.addEventListener(
      'WebViewJavascriptBridgeReady',
      function () {
        callback(WebViewJavascriptBridge)
      },
      false
    );
  }
}

connectWebViewJavascriptBridge(function (bridge) {
  //初始化
  if (!/(iPhone|iPad|iPod|iOS)/i.test(u)) {
    console.log("初始化")
    bridge.init(function (message, responseCallback) {
      //var data = {'Javascript Responds': 'Wee!'};
      responseCallback(data);
    });
  }
});


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)
      })
    })
  }
}

2, the introduced main.js.

import Bridge from './utils/bridge.js'
Vue.prototype.bridgeObj = Bridge

3. In the component needs to call a client method (requires prior agreement with the client colleagues good method name)

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

    // returns the process data 

})

4. When a client needs to call js function, the function can be registered in advance appointment to

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

Of course, I was in utils package these methods, the code would hold out,

So that you can call it, adapting ios and android

 

Perfect Oh, hee hee