uni-app 横屏切换到竖屏后点返回上一页直接退出了app 华为

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

uni-app 横屏切换到竖屏后点返回上一页直接退出了app 华为

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

示例代码:

一.竖屏的返回代码

back() {
uni.navigateBack({
delta: 1
});
也尝试用过  
uni.switchTab({
url: '/pages/index'
}); 也是直接退出了app
}

二.竖屏到横屏的全过程
shu.vue —>to.vue —>heng.vue

三.横屏到竖屏的全过程
heng.vue —>back.vue —>shu.vue

3.1 shu.vue —>to.vue

uni.navigateTo({
url: '/pages/homeitem/to?pathpl='+'/pages/homeitem/LandingPoint'
});

3.2 to.vue 代码

onLoad(option) {    
// #ifdef APP-PLUS    
// 锁定横屏    
plus.screen.lockOrientation("landscape-primary");    
plus.navigator.setFullscreen(true) //隐藏状态栏    
// #endif    
// 待切换差不多时候重定向到 heng.vue 页面    
// options.path 为 heng.vue 路由     
this.time = setTimeout(function(){    
console.log(option.pathpl,'路径')    
uni.redirectTo({    
url: option.pathpl    
});    

}, 2500)     
},    
beforeDestroy(){    
clearTimeout(this.time)    
},    
onBackPress() {    
// 防止用户在横竖屏切换过程中返回    
return true    
},  

3.3 heng.vue 返回back.vue的代码

uni.redirectTo({
url: '/pages/homeitem/back'
})

3.4 back.vue 代码

data(){
return{
time:null,
}
},
onShow() {
// #ifdef APP-PLUS
plus.navigator.setFullscreen(false) //显示状态栏    
// #endif    
// 进入此页面即刻退回上一页    
uni.navigateBack({    
delta: 1    
});    

},
onBackPress() {
// #ifdef APP-PLUS    
// 锁定竖屏    
plus.screen.lockOrientation("portrait-primary")    
// #endif    
},

1 回复

在处理uni-app应用中从横屏切换到竖屏后,点击返回按钮直接退出应用的问题时,通常是由于页面栈管理不当或生命周期钩子处理不当引起的。以下是一些可能的解决方案,包括代码示例,你可以根据实际情况进行调整。

1. 确保页面栈管理正确

首先,确保在页面的路由跳转时,页面栈的管理是正确的。可以使用uni-app提供的navigateToredirectToreLaunch等方法进行页面跳转,并确保每次跳转后页面栈的状态符合预期。

2. 监听屏幕方向变化

App.vue或具体页面中监听屏幕方向的变化,并在变化时做相应的处理,比如重新渲染页面或调整布局。

// App.vue
export default {
  onShow() {
    // 监听屏幕方向变化
    uni.onScreenOrientationChange((res) => {
      console.log('屏幕方向变化:', res.direction);
      // 可以在这里重置页面状态或重新渲染页面
      this.$forceUpdate(); // 强制重新渲染
    });
  },
  onHide() {
    // 页面隐藏时取消监听
    uni.offScreenOrientationChange();
  }
}

3. 处理返回按钮事件

在页面的onBackPress事件中处理返回按钮的逻辑,确保在横屏切换到竖屏后不会直接退出应用。

// 具体页面
export default {
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      // 处理返回逻辑,比如弹出确认框
      uni.showModal({
        title: '提示',
        content: '确定要返回吗?',
        success: (res) => {
          if (res.confirm) {
            return true; // 允许返回
          } else if (res.cancel) {
            return false; // 阻止返回
          }
        }
      });
      return true; // 如果没有弹出框,直接返回true
    }
    return false; // 其他情况阻止默认行为
  }
}

4. 调试和测试

在华为设备上调试和测试上述代码,确保在不同屏幕方向切换和返回操作时,应用的行为符合预期。

总结

以上方法提供了一种通过监听屏幕方向变化、管理页面栈和处理返回按钮事件来避免在横屏切换到竖屏后直接退出应用的思路。在实际应用中,可能需要根据具体的业务逻辑和页面结构进行调整和优化。如果问题依然存在,建议检查uni-app和华为设备的兼容性文档,或者向uni-app社区寻求更专业的帮助。

回到顶部