uni-app返回上一级页面异常

uni-app返回上一级页面异常

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.99

手机系统：Android

手机系统版本号：Android 12

手机厂商：华为

手机机型：荣耀70

页面类型：vue

vue版本：vue2

打包方式：云端

示例代码：

onBackPress:function(e)
{
    //监听返回事件  
    plus.webview.close("answer");  
    return false;  
},  
onLoad(option) {  

    this.nw=plus.webview.create("http://demo.nae.ce/ans.html","answer",{top:'60px',bottom:'5px'});  
    this.nw.overrideResourceRequest([{header:{'general-payload':'mun5e080AmGNzdWdscdczubBQxTw3haYPO7J0k2GWN0csdaT'}}]);  
    this.nw.show();  

},

操作步骤：

  • 新建ABC三个页面，在c页面plus.webview.create一个页面 ，再依次返回

预期结果：

  • 应该返回到A页面

实际结果：

  • 只能返回到B页面，再返回就会直接退出程序

bug描述：

  • 三级页面的情况下，返回到第二页就无法继续返回了，会直接退出，比如 A页面进入B页面，再从B页面进入C页面，我再C页面中通过plus.webview.create 新建了一个页面，之后再返回B页面，再从B页面返回A页面时就直接退出了

更多关于uni-app返回上一级页面异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

A->B ->C都用的什么方法跳转？

更多关于uni-app返回上一级页面异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uni.navigateTo

回复 2***@qq.com: 创建个空界面试试呢？然后还有问题的话，可以附件给代码扔上来看一下

在使用 uni-app 开发时，如果遇到返回上一级页面异常的情况，可能有以下几种原因和解决方法：

1. 页面栈异常

  • 原因: uni-app 的页面栈可能由于某些操作（如多次跳转、异步操作等）导致页面栈异常。

  • 解决方法: 使用 uni.navigateBack 方法时，确保页面栈中的页面顺序正确。可以通过 getCurrentPages() 方法查看当前页面栈的状态。

    const pages = getCurrentPages();
console.log(pages); // 打印当前页面栈
uni.navigateBack({
  delta: 1 // 返回上一级页面
});

2. 页面生命周期问题

  • 原因: 在页面生命周期中（如 onLoad, onShow 等）进行了某些操作，导致返回时页面状态异常。

  • 解决方法: 检查页面的生命周期函数，确保在返回时页面状态能够正确恢复。例如，在 onShow 中重新加载数据或更新页面状态。

    onShow() {
  this.loadData(); // 重新加载数据
}

3. 异步操作未完成

  • 原因: 在返回页面时，可能有异步操作（如网络请求）尚未完成，导致页面状态异常。

  • 解决方法: 在返回页面之前，确保所有异步操作已完成。可以使用 Promise 或 async/await 来控制异步操作的执行顺序。

    async onBack() {
  await this.finishAsyncTask(); // 等待异步操作完成
  uni.navigateBack({
    delta: 1
  });
}

4. 页面缓存问题

  • 原因: uni-app 默认会缓存页面实例，可能导致返回时页面状态未更新。

  • 解决方法: 可以在 pages.json 中配置页面不缓存，或者在 onUnload 生命周期中手动清除页面数据。

    {
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": false,
        "disableScroll": false,
        "onReachBottomDistance": 50,
        "backgroundColor": "#F8F8F8",
        "navigationBarBackgroundColor": "#F8F8F8",
        "navigationBarTextStyle": "black",
        "navigationStyle": "default",
        "enablePullDownRefresh": false,
        "backgroundTextStyle": "dark",
        "disableScroll": false,
        "onReachBottomDistance": 50,
        "backgroundColorBottom": "#F8F8F8",
        "backgroundColorTop": "#F8F8F8",
        "titleNView": false,
        "pullToRefresh": false,
        "scrollIndicator": false,
        "transparentTitle": "none",
        "allowsBounceVertical": "YES",
        "titlePenetrate": "NO",
        "pageOrientation": "portrait",
        "restartStrategy": "homePage",
        "visualEffectInBackground": "none",
        "navigationBarShadow": false,
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#F8F8F8",
        "navigationBarTextStyle": "black",
        "navigationStyle": "default",
        "enablePullDownRefresh": false,
        "backgroundTextStyle": "dark",
        "disableScroll": false,
        "onReachBottomDistance": 50,
        "backgroundColorBottom": "#F8F8F8",
        "backgroundColorTop": "#F8F8F8",
        "titleNView": false,
        "pullToRefresh": false,
        "scrollIndicator": false,
        "transparentTitle": "none",
        "allowsBounceVertical": "YES",
        "titlePenetrate": "NO",
        "pageOrientation": "portrait",
        "restartStrategy": "homePage",
        "visualEffectInBackground": "none",
        "navigationBarShadow": false
      }
    }
  ]
}

    或者在 onUnload 中清除数据：

    onUnload() {
  this.data = null; // 清除页面数据
}

5. 路由跳转问题

  • 原因: 使用了错误的跳转方法，如 uni.redirectTo 或 uni.reLaunch，导致页面栈被重置。

  • 解决方法: 确保在需要返回上一级页面时，使用 uni.navigateBack 方法。

    uni.navigateBack({
  delta: 1 // 返回上一级页面
});

6. 事件监听未移除

  • 原因: 在页面中监听了某些事件（如 uni.on），但在页面销毁时未移除监听，导致返回时事件仍然触发。

  • 解决方法: 在 onUnload 生命周期中移除事件监听。

    onUnload() {
  uni.off('eventName', this.handleEvent); // 移除事件监听
}

7. 自定义导航栏问题

  • 原因: 如果使用了自定义导航栏，可能会导致返回按钮的逻辑异常。

  • 解决方法: 检查自定义导航栏的返回按钮逻辑，确保点击返回按钮时正确调用 uni.navigateBack。

    onBack() {
  uni.navigateBack({
    delta: 1
  });
}
回到顶部