uni-app在自定义组件中内嵌H5/Html网页，加载不闪屏, 自定义webview大小

小豆包3D世界

已于 2023-05-11 12:55:11 修改

阅读量721

点赞数

分类专栏： uni 文章标签： uni-app html javascript

于 2023-04-28 10:10:40 首次发布

本文链接：https://blog.csdn.net/qq_37030315/article/details/130420759

版权

在uni-app中使用web-view组件加载H5/Html时会出现铺满屏幕无法控制大小以及在App端切换时的闪屏问题。通过动态创建webview并利用wv.close()或wv.hide()可以有效解决这些问题，实现自定义webview大小并避免闪屏现象。

摘要由CSDN通过智能技术生成

在自定义组件中内嵌H5/Html网页时，通过内置组件 web-view 实现（如下），发现会自动铺满整个页面，不可控制大小（默认充满屏幕不可控制大小）


<web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view>

有多个tab页面时（多个自定义组件切换时），调整webview窗口大小，会出现闪屏的现象

<template>
    <view class="content">
        <web-view class="webb" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
    </view>
</template>
<script>
    var wv;
    export default {
   
        data() {
   
            return {
   
            }
        },
        mounted() {
   
            // #ifdef APP-PLUS
                    var currentWebview = this.$parent.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
                    setTimeout(function() {
   
                        wv = currentWebview.children()[0]
                        wv.setStyle({
   top:150,height:300})
                    }, 1000); //如果是页面初始化调用时，需要延时一下
                    // #endif
        },
        beforeDestroy() {
   
        },
        methods: {
   
        }
    }
</script>
<style lang="scss">
    .content{
   
        width: 100%;
        height: calc(100vh - var(--status-bar-height) - 45px - 45px - 3px);
    }
    .webb{
   
        margin-top: calc(var(--status-bar-height) + 45px + 45px + 3px);
    }
</style>

上述方法在App端切换时，会出现闪屏现象

解决方法：

动态创建添加webview的方式来加载H5/Html网页，代码如下：

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