欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue项目与安卓、iOS交互

程序员文章站 2022-06-06 20:00:10
...

项目中有部分页面需要嵌入到安卓、iOS端,大致代码如下:

先创建一个 src/utils/bridge.js 文件用于封装 WebViewJavascriptBridge

function setupWebViewJavascriptBridge(callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge)
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback)
  }
  window.WVJBCallbacks = [callback]
  var WVJBIframe = document.createElement('iframe')
  WVJBIframe.style.display = 'none'
  WVJBIframe.src = 'https://__bridge_loaded__'
  document.documentElement.appendChild(WVJBIframe)
  setTimeout(function() {
    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)
      })
    })
  }
}

在 main.js 中引入该文件

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

当客户端需要调用 js 函数时,事先注册约定好的函数

var u = navigator.userAgent
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
if (isIOS) { // 注册iOS方法
	this.$bridge.registerhandler('JS Echo', (data, responseCallback) => {
  		alert('JS Echo called with:', data)
 	 	responseCallback(data)
	})
}

在需要调用客户端方法的组件中(事先需要与客户端同事约定好方法名)

var u = navigator.userAgent
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端

if (isAndroid) { // 调用安卓方法
  window.android.ObjCEcho(params)
}
if (isIOS) { // 调用iOS方法
  this.$bridge.callhandler('ObjC Echo', params, (data) => {
  	// 处理返回数据
  })
}