uni-app 安卓H5+ 关闭页面后其他页面无法点击和操作 死机一样

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

uni-app 安卓H5+ 关闭页面后其他页面无法点击和操作 死机一样

示例代码：

// 提交事件  
jq('.btn-dialog-confirm').on({'tap': function(event){  
            event.stopPropagation();  
            doc.activeElement.blur();  
// 业务代码  
});  

// 提交后执行  
$.toast('提交成功');  
Wupa.fire('socket:aluc-change', main.parent(), {});  
setTimeout(function(){  
   $.back();  
}, 100);  

var oldBack = $.back;  
    $.back = function() {  
        oldBack();  
    };

操作步骤：

复现操作
打开页面 -> 点击输入框 -> 弹窗软键盘 -> 编辑完直接点击保存（tap事件有触发blur()）-> 提交完成后 -> 触发一次fire() -> settimeout延迟关闭页面 $.back()

预期结果：

正常是应该提交后关闭页面，不会妨碍上个页面进行点击操作等，或切换其他页面显示

实际结果：

实际是偶尔性出现、不频繁，提交后关闭页面妨碍了上个页面操作或切换其他页面操作，怎么点击屏幕都没有效果

bug描述：

偶尔性出现，关闭页面后应用界面点击没有任何反应（下拉刷新时有个loading动画；操作多次返回键也没有用，仍是没反应）

操作

打开页面 -> 点击输入框 -> 弹窗软键盘 -> 编辑完直接点击保存（tap事件有触发blur()）-> 提交完成后 -> 触发一次fire() -> settimeout延迟关闭页面 $.back()


Harmonyos Next教程
3 回复

我也遇到了无法点击的情况，不知道咱俩是不是同一个问题
https://ask.dcloud.net.cn/question/203549


不是，我这个是以前老版的安卓HTML5+

针对您提到的uni-app在安卓H5+环境下关闭页面后其他页面无法点击和操作的问题，这通常可能是由于页面销毁不彻底或者内存泄漏导致的。以下是一些可能的解决方案，主要通过代码示例来展示如何处理这类问题。

1. 确保页面正确销毁

在uni-app中，当你关闭一个页面时，确保页面相关的资源被正确释放。可以通过在页面的onUnload或beforeDestroy生命周期钩子中进行清理工作。

// 在页面的 script 部分
export default {
  onUnload() {
    // 清理定时器、事件监听器等
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
    // 其他清理操作...
  },
  // 或者使用 beforeDestroy 钩子（视uni-app版本而定）
  beforeDestroy() {
    // 清理逻辑同上
  }
}

2. 使用Vue Router管理页面

如果你使用的是Vue Router（在H5+环境中可能需要特别配置），确保路由跳转和页面销毁的逻辑正确。

// 在 main.js 或路由配置文件中
const router = new VueRouter({
  routes: [
    { path: '/', component: HomePage },
    { path: '/about', component: AboutPage },
    // 其他路由...
  ]
});

// 确保在跳转时，旧页面被正确销毁
router.push('/about').catch(err => {
  console.error('路由跳转失败:', err);
});

3. 检查内存泄漏

内存泄漏是导致应用卡顿或假死的常见原因。使用浏览器的开发者工具（如Chrome DevTools）的内存分析功能来检测内存泄漏。

  • 打开DevTools，选择Memory面板。
  • 执行一系列操作（包括打开和关闭页面）。
  • 点击Heap Snapshot或Allocation instrumentation on timeline进行内存分析。
  • 检查是否有意外的内存增长或未被释放的对象。

4. 强制刷新页面（非最佳实践，但可作为临时解决方案）

如果上述方法均无效，可以考虑在关闭页面后强制刷新其他页面，但这通常不是最佳实践，因为它会影响用户体验。

// 在需要刷新的页面的 mounted 钩子中设置一个定时器检查
mounted() {
  this.checkAndRefresh();
},
methods: {
  checkAndRefresh() {
    // 假设有一个全局状态管理标记页面是否需要刷新
    if (globalState.needRefresh) {
      window.location.reload();
      globalState.needRefresh = false; // 重置状态
    }
    // 定时检查，可以根据需求调整时间间隔
    setTimeout(this.checkAndRefresh, 5000);
  }
}

请注意，上述代码示例仅作为问题解决的参考，具体实现可能需要根据您的项目结构和需求进行调整。

回到顶部