在使用uni-app的过程中，经常性会遇到要引入外部链接到自己uni-app项目中打开，这时需要用到webview组件，而webview在h5端和app端是有着不同的展示层级的。在app端，webview展示层级是大于page展示层级，那么势必会遮挡page里面的自定义的header头部导航栏及底部按钮栏目，因为此时的webview会充斥真个手机端屏幕。h5端的与app端不同，h5端的webview可以通过页面标签view去控制他的可视范围，说白了此时的webview跟平常的页面标签是一样的，可以直接通过css去控制大小。

兼容两端webview展示的方式如下：

<template>
   <view>
      <view class="ContentPage">
         <!-- #ifdef H5 -->
            <view :style="'height:'+h5WebviewHeight+'px'" style="position: relative;">
                 <web-view :src="PDFUrl" style="width: 100%;"></web-view>
            </view>
         <!-- #endif -->

         <!-- #ifdef APP-PLUS -->
             <web-view :src="PDFUrl"></web-view>
         <!-- #endif -->
       </view>
   </view>
</template>

<script>
     export default{
           data(){
              return {
                    PDFUrl:'http://www.baidu.com/',
                    h5WebviewHeight:0
              }
           },
          onLoad(){
               //调用方法
               this.setWebViewHeight();
          },
          methods:{
                setWebViewHeight(){
                    let _this=this
                    const query=uni.createSelectorQuery().in(_this);
                    //获取设备信息，主要是获取屏幕的可视高宽
                    uni.getSystemInfo({
                         success:(res)=>{
                              //这里的查询.ContentPage主要是为了拿到此元素距离顶部的距离有多少
                              query.select('.ContentPage').boundingClientRect(data => {
                                     // #ifdef H5
                                        //当前屏幕可视高度 - ContentPage的距离顶部的距离，剩下就是webview的高度啦
					 _this.h5WebviewHeight = res.screenHeight - data.top;
				     // #endif

                                      // #ifdef APP-PLUS
                                               //获取页面的webview
						var currentWebview = _this.$scope.$getAppWebview();
						setTimeout(() => {
						      var wv = currentWebview.children()[0];
						       wv.setStyle({
							   top: data.top, //ContentPage距离顶部的距离
							   height: res.screenHeight - data.top //去掉ContentPage距离顶部的距离后剩下的高度
							})
						}, 1000);
				      // #endif
                               })
                         }
                    })
                }
          }
     }
</script>

若是底部一样有按钮，且不想被webview遮挡，一样按照ContentPage获取到标签的高度最后减掉数值就可以了。

文章出自kcBlog博客，转载请注明出处