弄月
弄月
  • 发布:2020-08-27 14:21
  • 更新:2022-10-07 15:43
  • 阅读:9442

uni-app中使用webview加载网页,支持后退和关闭

分类:uni-app
  1. pages.json
"pages": [  
    {  
            "path" : "pages/index/web",  
            "style": {  
              "app-plus": {  
                "titleNView": {  
                  "buttons": [{  
                    "type": "close",  
                    "float": "left",  
                    "color": "#FFFFFF"  
                  }]  
                }  
              }  
            }  
        }  
]
  1. web.vue
<template>  
  <view>  
  </view>  
</template>  

<script>  
  export default {  
    data () {  
      return {  
        wv: null,  
        canBack: false  
      }  
    },  
    onLoad(params) {  
      if (!params.url) {  
        return  
      }  
      if (params.title) {  
        uni.setNavigationBarTitle({  
          title: params.title  
        })  
      }  

      // #ifdef APP-PLUS  
      const url = params.url  
      const wv = plus.webview.create("", "custom-webview", {  
        plusrequire: "none", //禁止远程网页使用plus的API,有些使用mui制作的网页可能会监听plus.key,造成关闭页面混乱,可以通过这种方式禁止  
        'uni-app': 'none', //不加载uni-app渲染层框架,避免样式冲突  
        top: uni.getSystemInfoSync().statusBarHeight + 44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值  
      })  
      wv.loadURL(url)  

      const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()  
      currentWebview.append(wv); //一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭  

      const self = this  
      wv.addEventListener('loaded', e => {  
        wv.canBack(e => {  
          self.canBack = e.canBack  
          currentWebview.setTitleNViewButtonStyle(0, {  
            color: e.canBack ? '#000' : '#fff',    
          });  
        })  
      })  
      this.wv = wv  
      // #endif  
    },  
    onBackPress(e) {  
      if (e.from === 'navigateBack') {    
        return false  
      }  
      // #ifdef APP-PLUS  
      if (this.wv && this.canBack) {  
        this.wv.back()  
        return true  
      }  
      // #endif  
    },  
    onNavigationBarButtonTap (e) {  
      uni.navigateBack()  
    }  
  }  
</script>
5 关注 分享
9***@qq.com rise 1***@qq.com l***@163.com 8***@qq.com

要回复文章请先登录注册

中国小小小学生

中国小小小学生

楼主真是好人啊 ,感谢!完美解决了我的问题
2022-10-07 15:43
6***@qq.com

6***@qq.com

可以局部改善,去掉params.url判断,高度就可以变化了。type设置为透明,还可以把h5背景顶头最上端,会变的非常漂亮。
2022-06-19 16:08
6***@qq.com

6***@qq.com

回复 3***@qq.com :
对啊,我的也是空白,不知道问题出在哪里?
2022-06-19 15:41
3***@qq.com

3***@qq.com

我咋是空白呢
2022-03-29 15:50
降龙十八掌

降龙十八掌

楼主params.url 怎么定义的 怎么获取<web-view :webview-styles="webviewStyles" src="https://www.baidu.com"></web-view> 的url地址呢?
2021-11-18 16:28
6***@qq.com

6***@qq.com

回复 1***@qq.com :
安卓只能关闭当前页。。好像是每新加载一个url都算是一个webview
2021-10-07 11:02
6***@qq.com

6***@qq.com

返回的时候会自动刷新页面 请问怎么阻止
2021-10-07 10:18
1***@qq.com

1***@qq.com

只能关闭当前页
2021-01-25 10:28
kanenhan

kanenhan

棒!
2021-01-16 11:23
9***@qq.com

9***@qq.com

好贴 解决了我的问题
2020-11-17 11:24