uni-app 两个webView第一次切换后页面内容不变

uni-app 两个webView第一次切换后页面内容不变

开发环境 版本号 项目创建方式
Windows window10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：window10

HBuilderX类型：正式

HBuilderX版本号：3.3.3

手机系统：Android

手机系统版本号：Android 12

手机厂商：小米、华为、等

手机机型：redmik30、小米note10、等

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<template>  
     <web-view v-if="path" :src="path" />   
</template>  

<script>  
    export default {  
        data() {  
            return {  
                path: '',  
            }  
        },  
        onLoad(options) {  
            this.path = JSON.parse(decodeURI(options.data))  
        },  
        onUnload() {  
            // #ifdef APP-PLUS  
            plus.screen.lockOrientation('portrait-primary');  
            // #endif  
        }  
    }  
</script>  

<style>  
</style>

<template>  
    <web-view :src="path" />  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                path: '',  
            }  
        },  
        onLoad(options) {  
            plus.screen.lockOrientation('portrait-primary');  
            this.path = '竖屏h5页面‘  

        },  
        onUnload() {  
            plus.screen.lockOrientation('portrait-primary');  
        },  
    }  
</script>  

<style>  
</style>

let data = '横屏h5页面url'  
uni.webView.navigateTo({  
    url: '/pages/横屏路由?data=' + encodeURI(JSON.stringify((data)))  
})

更多关于uni-app 两个webView第一次切换后页面内容不变的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

这么基础的问题，没有人遇到么？

更多关于uni-app 两个webView第一次切换后页面内容不变的实战教程也可以访问 https://www.itying.com/category-93-b0.html


建议上传可复现简单的示例工程，能附上操作视频或者GIF图更好。这样方便他人可以更好的理解和排查分析问题！

http://47.244.172.180/video/bug.zip

示例放到我服务器了

提供一个可复现的示例看看

不能发zip…

我邮箱 2291172314@qq.com

私信邮箱 或直接加qq,我发示例（含文档视频）

http://47.244.172.180/video/bug.zip

示例放到我服务器了

在么，大佬

这个问题是由于web-view组件在uni-app中的缓存机制导致的。当两个web-view页面切换时，如果使用相同的组件结构，系统可能会复用之前的web-view实例，导致内容没有更新。

解决方案：

  1. 使用key属性强制重新渲染
<template>  
    <web-view v-if="path" :src="path" :key="path" />   
</template>
  1. 在onShow生命周期中重新加载
export default {  
    data() {  
        return {  
            path: '',  
        }  
    },  
    onLoad(options) {  
        this.loadWebView(options)
    },  
    onShow() {
        // 页面显示时重新设置路径，确保内容更新
        if(this.path) {
            const tempPath = this.path
            this.path = ''
            this.$nextTick(() => {
                this.path = tempPath
            })
        }
    },
    methods: {
        loadWebView(options) {
            this.path = JSON.parse(decodeURI(options.data))
        }
    }
}

  1. 使用不同的页面路径 如果两个web-view页面结构相似，可以考虑创建两个不同的页面文件，避免组件复用。

  2. 在onUnload中清理web-view

onUnload() {  
    this.path = ''
    // #ifdef APP-PLUS  
    plus.screen.lockOrientation('portrait-primary');  
    // #endif  
}
回到顶部