H5与ios和安卓数据交互
在开发中会遇到很多app中嵌套H5页面,因此就会遇到很多H5与安卓交互的问题,下面就是远程的方法,我的页面遇到的少,如果多的话,可以用第三方集成,那样更方便,如果遇到后续我会追更的。
第一步:H5前端判断ios还是android
getType() {
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android安卓
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios苹果
if (isAndroid) {
return 'android'
} else if (isiOS) {
return 'ios'
}
},
第二步:如果是安卓像H5传送数据的话,一个方法就可以了,但是如果是ios那就要发布订阅,
ios:
1.H5先调用ios的方法
2.ios监听到再调用H5的方法,这里要注意,如果是用vue的话,那就要吧方法给window
//吧vue方法挂再window下
mounted(){
window.getInfo = this.getInfo
},
onLoad() {
let navi = this.getType()
if(navi==='android'){
this.info = JSON.parse(window.android.getToken()); //安卓
}else{
window.webkit.messageHandlers.getToken.postMessage(null) //ios监听
}
},
getInfo(info){
this.info = JSON.parse(info) //ios调用的方法,info是ios传递的参数,直接赋值就可以用了
}