原生H5如何与Android和IOS通信
交互方式
Android:
1) window.WebViewJavascriptBridge[methodName](params)
2) window.android.methodName
IOS:
1) window.webkit.messageHandlers[methodName].postMessage(params) // 无法获取原生返回值
2) window.prompt(message, default) // 可以获取到返回值
VUE 实战
1 . 判断设备
export const getAppCode = () => {
let ua = navigator.userAgent.toLowerCase()
if (ua.indexOf('_android') > -1) {
return 'android'
} else if (ua.indexOf('_ios') > -1) {
return 'ios'
} else {
return ''
}
}
2 . 封装通信的方法
// 引入判断设备方法
import {getAppCode} from '../common/js/dom'
// 公共调用方法
function implement (methodName, params) {
if (getAppCode() === 'ios') {
// 苹果手机
window.webkit.messageHandlers[methodName].postMessage(params)
window.prompt(JSON.stringify({type: 'JSbridge', functionName: methodName, arguments: params}))
} else if (getAppCode() === 'android') {
// 安卓手机
window.android[methodName](params)
} else {
return false
}
}
// VUE中Method写入与Android和Ios的通信方法
export default {
// 见名知意,方法名设置为Android和Ios定义好的
methods: {
// 在线客服
callPhoneNum (phone) {
implement('callPhoneNum', phone)
},
// 进入详情
openNewWindow (data) {
implement('openNewWindow', data)
},
}
}
3 . 通过VUE的混入引入方法, 直接调用
// 在Vue功能页面引入第二步封装的混入方法
import app from '@/mixins/app'
export default {
name: 'seckillList',
mixins: [app],
props: {
shopList: { tyep: Array }
},
methods: {
// 点击按钮跳转到详情
goToDetial (item) {
const url = `${window.location.origin}/app-duiyu/goodsDetail?sno=${item.goodsSno}`
// 调用原生通信方法
this.openNewWindow(url)
},
}
}
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。