工作中经常遇到一些奇怪的东西,我有个这样的需求,就是我写的vue项目被嵌套在别的h5项目页面下,so进入我的页面前需要判断他的h5页面有没有登录,这时候就需要我的客户端页面调用h5页面的登录方法。客户端页面(ios、安卓)两种都得交互h5页面,,,借助JavascriptBridge工具,前端对应的js代码 因为我的项目是vue的,我一般把函数都转为箭头函数了。
<template>
<div class="tel">
<p>{{message}}aaasss</p>
<button @click="callBackH5">与h5页面交互</button>
</div>
</template>
<script>
/*判断客户端手机为ios还是安卓,放在Script中*/
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终端
export default {
data(){
return{
message:'',
dataCall:''
}
},
mounted(){
//$on给当前事件绑定一些事件监听
this.$bus.$on('on-click',mes=>{
this.message=mes
})
},
created(){
},
methods:{
/*这段代码是固定的,必须要放到js中,vue的就放在method */
setupWebViewJavascriptBridge(callback) {
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)
},
callBackH5(){
if(isIOS){
this.setupWebViewJavascriptBridge((bridge) =>{
//注册一个方法(方法名是“toLogin”),客户端进行调用(方法名也是“JS Echo”),responseCallback是回调函数
// bridge.registerHandler('toLogin', function(data, responseCallback) {
// console.log("JS Echo called with:", data)
// responseCallback(data)
// })
//调用原生的方法toLogin
bridge.callHandler('toLogin', this.dataCall, (response)=> {
console.log("response:", response)
})
})
}else if(isAndroid){
window.WebViewJavascriptBridge.callHandler('toLogin', this.dataCall, (response)=> {
console.log("response:", response)
})
}
}
}
}
</script>
<style scoped>
.tel{
border: 1px solid rebeccapurple
}
</style>