1、h5调用app的方法或者传值
// Android:
window.Android.方法名(参数)
// ios
window.webkit.messageHandlers.方法名.postMessage(参数)
2、app处理完后回调(向h5传值)
// 自定义一个事件,供app调用
window.供app调用的方法名 = function (data) {
let event = new CustomEvent('自定义的事假名', {
'detail': {
data: data // app传递过来的值
}
})
let dom = document.querySelector('挂载自定义事件的元素id')
dom.dispatchEvent(event)
}
3、例子(这里是h5调用app的扫码功能,将扫码结果回传,基于vue开发)
// html
<img class="icon-code" src="../../assets/icon-code.png" alt="" id="sweepBtn" @click.stop="sweepCode" @SweepData="sweep($event)">
// js
// 调取原生扫码接口
sweepCode () {
this.$store.state.isAndroid ? window.Android.sweepToApp('start') : window.webkit.messageHandlers.sweepToApp.postMessage('start')
}
// app处理结果回调
sweep (e) {
console.log(e.detail.data) // app传递结果
},
// 供app调用传值的全局方法(注意需要挂载到window app才调用得到)
window.SweepData = function (data) {
let event = new CustomEvent('SweepData', {
'detail': {
data: data
}
})
let dom = document.querySelector('#sweepBtn')
dom.dispatchEvent(event)
}
以上为自己的使用记录,有更好的方法或者我有不对的地方,欢迎指正
发表回复