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

原创
08/27 14:19
阅读数 2.3K
  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>
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部