uni-app webView点击左上角返回、手势返回时偶现会直接返回到首页

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app webView点击左上角返回、手势返回时偶现会直接返回到首页

项目信息 详情
产品分类 uniapp/App
PC开发环境 Mac
PC开发环境版本 14.5
手机系统 HarmonyOS NEXT
手机系统版本 HarmonyOS NEXT Developer Beta1
手机厂商 华为
手机机型 mate60 pro
页面类型 vue
vue版本 vue3
打包方式 离线
项目创建方式 CLI
CLI版本号 5.0

操作步骤:

  • 正常使用webView组件

预期结果:

  • 按History层级返回

实际结果:

  • 返回多级

bug描述:

webView点击左上角返回、手势返回时偶现会直接返回到首页(即返回多级路由直接关闭webView页面),此时History中是存在多级的。在快速点击跳转时较为明显,可见视频附件

VID20240925202216.mp4_.zip


3 回复

4.36后已经修复了

在uni-app中,使用webView组件时,如果遇到点击左上角返回按钮或手势返回时偶现直接返回到首页的问题,这通常与页面栈的管理和路由逻辑有关。以下是一些可能的解决方案和代码示例,帮助你解决这个问题。

1. 确保页面栈管理正确

首先,确保在每次打开webView页面时,都正确地将页面推入页面栈。同时,在返回时,确保页面栈能够正确地弹出页面。

// 打开webView页面
uni.navigateTo({
    url: '/pages/webView/webView?url=' + encodeURIComponent(yourWebViewUrl),
    success: function(res) {
        console.log('Navigate to webView page success');
    },
    fail: function(err) {
        console.error('Navigate to webView page failed', err);
    }
});

2. 监听返回事件并处理

在webView页面内,可以监听返回事件,并根据实际情况决定是返回上一页还是执行其他操作。

// 在webView页面的onUnload或onHide生命周期内监听返回事件
export default {
    onUnload() {
        if (this.handleBackPress) {
            uni.offPageScrollTo(); // 清除页面滚动监听,防止内存泄漏
            uni.removeListener('backbutton', this.handleBackPress);
        }
    },
    onLoad() {
        this.handleBackPress = (e) => {
            if (/* 判断是否应该返回上一页的条件 */) {
                uni.navigateBack();
            } else {
                // 执行其他操作,如显示确认退出的对话框
                uni.showModal({
                    title: '提示',
                    content: '确定要退出吗?',
                    success: function (res) {
                        if (res.confirm) {
                            // 执行退出操作,如跳转到首页
                            uni.switchTab({
                                url: '/pages/index/index'
                            });
                        } else if (res.cancel) {
                            // 取消退出操作
                        }
                    }
                });
            }
        };
        uni.addListener('backbutton', this.handleBackPress);
    }
};

3. 优化手势返回逻辑

对于手势返回,你可能需要自定义返回逻辑,特别是在使用swiper或滑动组件时。确保手势返回能够正确地识别并处理。

// 假设你有一个swiper组件
<swiper @change="onSwiperChange" current="{{current}}">
    <!-- swiper-item 内容 -->
</swiper>

export default {
    data() {
        return {
            current: 0,
        };
    },
    methods: {
        onSwiperChange(e) {
            this.current = e.detail.current;
            // 根据current值更新页面状态或处理返回逻辑
        },
        // 其他手势返回处理逻辑
    }
};

通过上述方法,你可以更好地管理页面栈和返回逻辑,避免在webView页面返回时直接跳回首页的问题。注意,具体实现可能需要根据你的应用逻辑进行调整。

回到顶部