这两天领导一直想说要做个混合开发,然后让我用vue和原生app联调,vue中几乎没什么难点,主要的是和原生app嵌套的跳转返回(目前就先遇到这个问题,我相信还有很多难题。。。),看了一天的文档也调试过都没成功,今天此刻终于成功了,很开心的分享下~
问题:原生app点击按钮可以跳到vue项目,但是返回不回去。。。复制代码
方法:
vue端:
//在methods中加入这两个方法,其中closeWebview是和ios和android约定好的方法名 methods:{ backPage(e){//按钮的点击事件,实现关闭vue项目返回到原生页面中 this.setupWebViewJavascriptBridge(function(bridge) { bridge.registerHandler("closeWebview",function(data,responseCallback){ responseCallback("button js callback"); }); var data = "hello"; //下面这个是安卓调用的时候必须加,ios调用的时候没有也可以跳转和返回 bridge.callHandler('closeWebview',data,function(resp){ //document.getElementById("show").innerHTML = "payInterface" + resp; }); }) }, setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener('WebViewJavascriptBridgeReady', function() { callback(WebViewJavascriptBridge) },false); } //iOS使用 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) } }复制代码
具体可以参考:https://www.jianshu.com/p/e37ccf32cb5b