h5 上 删除 交互_h5页面与原生app页面交互

两端交互安卓：https://github.com/lzyzsd/JsBridge

IOS：https://github.com/marcuswestin/WebViewJavascriptBridge

两者一起用的话会起冲突，需要判断一下是什么终端，然后分别调用，

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终端

以下为安卓和ios调用原生app端开通vip的页面，‘AndroisVipFun’，‘IosisVipFun’这两个为安卓和ios定义的函数名称供web端页面调用，(这里是不需要传递参数的)

...}else if(isAndroid){

window.WebViewJavascriptBridge.callHandler('AndroisVipFun');

}else if(isiOS){//alert('IOS不是VIP,跳去VIP页面')

this.setupWebViewJavascriptBridge(function(bridge) {

bridge.callHandler('IosisVipFun',function(){

})

})

}

如需要传递参数则可以把参数像下面定义好，(传递的格式双方定义好即可),参数根在函数名后面，后面也可以在跟一个回调函数

var params = {"orderCount": this.seleCardNum,"orderPrice":this.cardPrice,"orderAddress":this.detailAddress}

...

...

window.WebViewJavascriptBridge.callHandler('AndroisVipFun',params);

app端调用web页面函数操作

以下为ios必须要加入的一段代码，上面调原生方法时有用到。

setupWebViewJavascriptBridge:function(callback) {//ios处理

if (window.WebViewJavascriptBridge) { returncallback(WebViewJavascriptBridge); }if (window.WVJBCallbacks) { returnwindow.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)

}

安卓的则需要加入如下代码：

connectWebViewJavascriptBridge:function(callback) {//web调提供方法给app调用

if(window.WebViewJavascriptBridge) {

callback(WebViewJavascriptBridge)

}else{

document.addEventListener('WebViewJavascriptBridgeReady',function() {

callback(WebViewJavascriptBridge)

},false);

}

},

当app原生端需要给我反回数据时则需要用到上面两段代码，web端定义函数供原生app端调用

下面为安卓调用，web定义了一个funParam函数名，告诉原生app凋，同时data接收传过来的参数去获取相应的数据

if(isAndroid){this.connectWebViewJavascriptBridge(function(bridge) {//web定义一个funParam方法让app调用data接收app传过来的参数(uid token)

bridge.registerHandler("funParam", function(data) {var arrData=[]

arrData=data.split(',');

_this.uid=arrData[1]

_this.token=arrData[0]Vue.http.options.emulateJSON= true_this.$http.post(rootPathssb,ProductBasePara).then((res)=>{

res=res.body

_this.isDredge=res.body.isDredge

})

});

})

}

ios则如下：接到到的参数处理方法相同，可以单拿出来写个通用函数。

else{this.setupWebViewJavascriptBridge(function(bridge) {

bridge.registerHandler("funParamIos", function(data) {var arrData=[]

arrData=data.split(',');

_this.uid=arrData[0]

_this.token=arrData[1]

Vue.http.options.emulateJSON= true_this.$http.post(rootPathssb,ProductBasePara).then((res)=>{

res=res.body

_this.isDredge=res.body.isDredge

})

});

})

}