android ios h5交互设计,基于vue，移动端h5如何和android、iOS客户端进行交互

前端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：是成功之后的回调，在客户端可以看到