乐趣区

关于前端:基于vue移动端h5如何和androidiOS客户端进行交互

jiezi

前端 h5 基于 vue，vant，客户端 Android，iOS

通常在一个 app 外面，有一些页面是用 h5 做的，那么这时候就有了客户端和 h5 交互的问题：

1、客户端调用 h5 页面:
间接用 WebView 加载 h5 的地址就好了，地址残缺的地址，如果这个被加载的页面须要什么参数，就拼在地址前面。（例如：https://www.baidu.com/?id=123…

2、h5 调用客户端：
在 h5 页面，有时候要调用起客户端的页面或者事件，都能够当成一个事件去解决：
1、先在文件夹下创立一个 bridge.js，用来封装对交互事件的一个解决 

let u = navigator.userAgent, app = navigator.appVersion
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // 安卓
let isIOS = !!u.match(/\(i[^;]+;(U;)? CPU.+Mac OS X/) //ios 终端

// 这是必须要写的，用来创立一些设置
function setupWebViewJavascriptBridge(callback) {
  // Android 应用
  if (isAndroid) {if (window.WebViewJavascriptBridge) {callback(window.WebViewJavascriptBridge)
    } else {
      document.addEventListener(
        'WebViewJavascriptBridgeReady',
        () => {if(window.onWebViewJavascriptBridgeReady) window.onWebViewJavascriptBridgeReady(window.__bridge = WebViewJavascriptBridge)
          callback(window.WebViewJavascriptBridge)
        },
        false
      )
    }
  }

  // iOS 应用
  if (isIOS) {if (window.WebViewJavascriptBridge) {return callback(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__'
    document.documentElement.appendChild(WVJBIframe)
    setTimeout(function () {document.documentElement.removeChild(WVJBIframe) }, 0)
  }
}
// 注册回调函数，第一次连贯时调用 初始化函数 (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)
      })
    })
  }
}

而后在入口文件 main.js 文件中引入，并挂载到原型上：

import Bridge from '@/libs/bridge'
Vue.prototype.$bridge = Bridge

而后就能够在所须要的组件中用啦！
比如说 h5 一个点击事件，要调用客户端的货色，就能够间接这样写：

const data = {
            titleName: '下载',
            titleUrl: 'https://www.baidu.com/?id=123&name=456'
          }
this.$bridge.callHandler('titleDownLoad', data, response => {console.log('response:', response)
          })
titleDownLoad：是和客户端定义的 js 通信桥的事件名字，必须要和客户端统一，data：是客户端所须要的参数，response：是胜利之后的回调，在客户端能够看到
退出移动版