vue項目 WebViewJavascriptBridge 適配android和ios

前言

 最近在app 原生頁面 嵌套 作Vue 的H5，混合開發，固然原生和Vue 交互方面固然用到 WebViewJavascriptBridge 這個東西啦，

 固然在用到的時候也有問題，能夠參考大佬的寫法 而後結合本身的寫法 ，本身整除一套適合的代碼

這個是 https://github.com/marcuswestin/WebViewJavascriptBridge     這個是對WebViewJavascriptBridge 描述，不懂的能夠去看看麼

上代碼

1.建立 src/utils/bridge.js 文件，用於封裝 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)
      })
    })
  }
}

二、在main.js 中引入.

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

3.在須要調用客戶端方法的組件中（事先須要與客戶端同事約定好方法名）

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

    // 處理返回數據

})

4.當客戶端須要調用 js 函數時,事先註冊約定好的函數便可

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

固然 我是封裝了 這些方法在utils中，代碼就不放出來了，

這樣就能夠調用啦， 適配ios 和android

 

完美哦 ，嘻嘻