关于weview的问题，我快被逼疯了~

分类：uni-app

Webview uniapp

需求：

打开一个配置好的网页
要求APP能够和网页进行通信。
能够对加载的网页资源等进行拦截控制。
要求webview（浏览器）实现历史记录返回，同时能够直接关闭功能。

我尝试了多种webview 的使用方案，最终都无法完全实现功能。

【一】 vue页面 + webview 组件
这个方案使用 uni.navigateBack 就直接操作了当前页面的webview组件的返回，无法直接控制APP的路由返回。导致无法实现直接关闭功能。
同时无法实现网页资源拦截控制

【二】 vue页面 + plus.webview.create

无法实现 APP 和网页 通信

【三】 nvue页面 + webview 组件

无法实现 APP 和网页通信网页资源拦截控制，通过 ref 也不能获取到完整weview实例对象（这个我不太确定，但是多数plus.weview api 无法使用）。

【四】 nvue页面 + plus.webview.create

和 vue 页面情况一样

https://ask.dcloud.net.cn/question/91867 plus.webview.create 无法实现通信这里已经有解释了。

所以我认为目前能满足需求的方案就是第一个方案，

但是急需解决 uni.navigateBack 能够直接操作app的路由的问题。

https://ask.dcloud.net.cn/question/93286 这个问题我已经发布了好几天了，但是无人问津啊~~~

真心的请教各位大佬，这个有解决方案吗？

2020-04-14 13:43 负责人:无分享

9 个回复

Kindi丶 (作者)

 this.$scope.$getAppWebview().children()[0].close()    
 setTimeout(() => {    
       uni.navigateBack()    
  }, 0)

测试可行，拿到当前webview实例 close 后进行 navigateBack。

teller306

不可以，我是uniapp跳到webview,支付完成后在状态栏上有一个按钮手动点击返回uniapp，用上面那段代码无法跳回

2020-05-06 18:31
笔迹

测试可行，感谢作者

2021-01-05 10:10

Kindi丶 (作者)

@DCloud_App_Array
@DCloud_UNI_HDX
@DCloud_UNI_CHB

hhyang - 如有问题，请添加QQ1606726660 备注付费咨询

uni.navigateBack 你是在app下的vue文件里面执行的么？还有拦截资源啥的用h5+ 随随便便创建一个 weview 就能拦截何必你说的那么麻烦

Kindi丶 (作者)

h5+创建的webview 无法和 app 通信

2020-04-14 16:18
Kindi丶 (作者)

uni.navigateBack 是在 vue 页面调用的。

2020-04-14 16:18

DCMarvel

部分功能我写过,
给你个思路吧
用你的【二】 vue页面 + plus.webview.create
在 + uni.$on uni.$emit + plus.webview.evalJS

1***@qq.com

直接关闭这个我遇到过,你这需要获取到页面层级进行回退次数就好了

夜散点炽 - 移动开发

楼主解决了吗，我也遇到路由回退判断问题，
我是用楼主的第一方案
业务要求有历史回退，无历史关闭
我是这么写的

wv.canBack(function(e) {  
                        if (e.canBack) {  
                            wv.back(); //后退到上次加载的页面  
                        } else {  
                            uni.navigateBack(); //关闭页面  
                        }  
                    });

刚开始以为很正常，太简单了，后来才发现，坑在里头，这API 只能使用一次，第二次就不执行回调了，我取webView的URL发现第二次为空，大概就是这个问题点了