uniapp: webview全屏遮挡住状态栏的解决方案

什么是webview？

是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个屏幕。用通俗的话来说，他就是一个“载体、桥梁”，把App与h5给结合起来， 我们通常在项目中一般是把h5页面嵌套在app中使用，实现前端的混合式开发。

产生问题的原因以及效果展示

上面我们说过，webview会自动铺满整个屏幕，所以这就导致了一些问题，比如今天，给大家所分享的 “ 遮住导航栏的问题 ”。在我们项目开发过程中，导航栏都是由h5这边写的，在uniapp中不需要设置导航栏，那么在pages.json中就让 titleNView 为false了，下面给大家几张案例，是如下情况：

微信图片_20210319163319.jpg

解决方案

既然webview是铺满整个屏幕，那么我们就通过设置webview的height和top值来实现正常效果的展示。代码中所用的两个Api: getAppWebview、getSystemInfo, 具体的属性大家可以去文档去看

onLoad() {
    let height = 0; //定义动态的高度变量
    let statusbar = 0; // 动态状态栏高度
    uni.getSystemInfo({ // 获取当前设备的具体信息
        success: (sysinfo) => {
            statusbar = sysinfo.statusBarHeight;
            height = sysinfo.windowHeight;
        }
    });
    let currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
    setTimeout(function() {
        var wv = currentWebview.children()[0];
        wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
            top: statusbar, //此处是距离顶部的高度，应该是你页面的头部
            height: height, //webview的高度
        })
    }, 200); //如页面初始化调用需要写延迟
}

通过以上方法遮住状态栏的问题得到了解决，但随之而来的问题又来了，在安卓手机上，webview页面又被系统自带返回键的那一栏给遮住了，如下图所示：

微信图片_20210319163804.png

这种情况主要是在h5中设置了底部按钮的固定定位，既然h5是没有问题的，那么问题就还是出在了webview上面，所以我们还是得在上面的代码中，做一点点修改即可， 如下代码所示

wv.setStyle({
    top: statusbar,
    height: height - statusbar, // 我们在这里把webview的高度调整一下
})

那我们最后再来看一下最终的效果，如下图所示：

QQ图片20210319144936.jpg

到这差不多就结束了，如果大家有什么问题，欢迎下方评论区留言，小编会第一时间答复您的哦~