前端h5是基于vue，vant，客户端Android，iOS一般在一个app里面，有的页面是用h5做的，那么客户端和h5的交互有一个问题：1.客户端调用h5页面：直接用WebView加载h5地址即可。地址齐全。如果加载的页面需要任何参数，请将其放在地址之后。（例如：https://www.baidu.com/?id=123...）2、H5调用客户端：在h5页面上，有时需要从客户端调用的页面或事件可以处理作为事件处理：1.先在文件夹下创建一个bridge.js封装一个交互事件的处理letu=navigator.userAgent,app=navigator.appVersionletisAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1//AndroidletisIOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/)//ios终端//这是创建一些设置所必需的functionsetupWebViewJavascriptBridge(callback){//Android使用if(isAndroid){if(window.WebViewJavascriptBridge){callback(window.WebViewJavascriptBridge)}else{document.addEventListener('WebViewJavascriptBridgeReady',()=>{if(window.onWebViewJavascriptBridgeReady)window.onWebViewJavascriptBridgeReady(window.__bridge=WebViewJavascriptBridge)回调(window.WebViewJavascriptBridge)},false)}}//iOS使用了document.createElement('iframe')WVJBIframe.style.display='none'WVJBIframe.src='wvjbscheme://__BRIDGE_LOADED__'document.documentElement.appendChild(WVJBIframe)setTimeout(function(){document.documentElement.removeBIframe(WVJ)},0)}}//注册回调函数，第一次连接时调用初始化函数（android需要初始化，ios不需要）setupWebViewJavascriptBridge((bridge)=>{if(isAndroid){//初始化bridge.init((message,responseCallback)=>{vardata={'JavascriptResponds':'Wee!'}responseCallback(data)})}})exportdefault{//js调用APP方法（参数为：应用程序提供的方法名称传递给应用程序数据回调)callHandler(name,data,callback){setupWebViewJavascriptBridge((bridge)=>{bridge.callHandler(名称，数据，callback)})},//APP调用js方法（参数分别为：js提供的方法名回调）registerHandler(name,callback){setupWebViewJavascriptBridge((bridge)=>{bridge.registerHandler(name,(data,responseCallback)=>{callback(data,responseCallback)})})}}然后在入口文件main.js中导入并挂载到原型上：importBridgefrom'@/libs/bridge'Vue.prototype.$bridge=Bridge然后可以在所需的组件中使用！比如：h5是一个点击事件，如果要在客户端调用什么，可以直接这样写：constdata={titleName:'Download',titleUrl:'https://www.baidu.com/?id=123&name=456'}this.$bridge.callHandler('titleDownLoad',data,response=>{console.log('response:',response)})titleDownLoad:是定义的js通信桥的事件名与客户端，必须与客户端共享端一致，data：是客户端需要的参数，response：是成功后的回调，客户端可以看到客户端调用h5事件：必须是放在创建的生命周期中this.$bridge.registerHandler('decodeMethod',(data,responseCallback)=>{this.decodeMethod(data)//成功后调用h5里面的一个方法returnresponseCallback(data)})
