h5-（安卓和ios）之间的传值

背景：

在我们工作中或多或少会遇到这样的需求；那就是h5与安卓和ios的传参问题；今天我给大家介绍一下大致的用法，希望能帮到你！
1.创建一个文件：JSBridge.js
复制以下代码即可：

const isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1
const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
// 这是必须要写的，用来创建一些设置
function setupWebViewJavascriptBridge (callback) {
  // Android使用
  if (isAndroid) {
    if (window.WebViewJavascriptBridge) {
      callback(window.WebViewJavascriptBridge)
    } else {
      document.addEventListener(
        'WebViewJavascriptBridgeReady',
        () => {
          callback(window.WebViewJavascriptBridge)
        },
        false
      )
    }
    sessionStorage.phoneType = 'android'
  }
  // iOS使用
  if (isiOS) {
    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 = 'wvjbscheme://__BRIDGE_LOADED__'
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'
    document.documentElement.appendChild(WVJBIframe)
    setTimeout(() => {
      document.documentElement.removeChild(WVJBIframe)
    }, 0)
    sessionStorage.phoneType = 'ios'
  }
}
// 注册回调函数，第一次连接时调用 初始化函数(android需要初始化,ios不用)
setupWebViewJavascriptBridge((bridge) => {
  if (isAndroid) {
    // 初始化
    bridge.init((message, responseCallback) => {
      var data = {
        'Javascript Responds': 'Wee!'
      }
      responseCallback(data)
    })
  }
})
export default {
  // js调APP方法 （参数分别为:app提供的方法名  传给app的数据  回调）
  callHandler (name, data, callback) {
    setupWebViewJavascriptBridge((bridge) => {
      bridge.callHandler(name, data, callback)
    })
  },
  // APP调js方法 （参数分别为:js提供的方法名  回调）
  registerHandler (name, callback) {
    setupWebViewJavascriptBridge((bridge) => {
      bridge.registerHandler(name, (data, responseCallback) => {
        callback(data, responseCallback)
      })
    })
  }
}

2.向ios/安卓传值
需要在vue方法中声明一个callApp事件并触发

/**
     * 获取安卓和ios的获取点击 share ios/安卓的函数即可；返回的值一个对象的形式
     */
    callAPP () {
      const param = { msg: 'sajdklajskldj' } // JS给APP传得参数
      console.log(123456)
      this.$bridge.callHandler('share', param, (res) => {
        alert('获取app响应数据:' + res)
      })
      console.log(789)
    },

3.ios/安卓向h5传值
需要在mounted声明周期中去调用这个函数

/**
     * 这是h5自我注册的方法；ios和安卓那边进行触发传值给我
     */
    appCall () {
      this.$bridge.registerHandler('appCallJS', (datas, responseCallback) => {
        console.log(datas)
        alert('showStationList')
        alert('showStationList' + datas)
      })
    }

写到这儿基本上就可以获取和接受值了，大家一定要注意2/3步骤；今天的分享就到了这。
如果这篇文章帮助到了你，那将是我的荣幸！