vue项目 WebViewJavascriptBridge 适配android和ios

Posted 2022-06-12 yf-html

前言

 最近在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)
      )
    )
  

2、在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

 

完美哦 ，嘻嘻