uni-app 子窗体不会销毁

uni-app 子窗体不会销毁

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.16

手机系统：Android

手机系统版本号：Android 12

手机厂商：华为

手机机型：红米k40

页面类型：nvue

vue版本：vue2

打包方式：云端

示例代码：
两个页面 a b 中使用同一个子窗体，a跳转b再返回a ，uni.$on就无法控制a页面的子窗体了

操作步骤：
两个页面 a b 中使用同一个子窗体，a跳转b再返回a ，uni.$on就无法控制a页面的子窗体了

预期结果：
当前页面只能控制当前页面的子窗体

实际结果：
uni.$on不能控制当前子窗体

bug描述：
子窗体所在的 的页面退出后子窗体不会销毁    uni.$on 只能控制最后一个打开的子窗体不能控制当前页面的子窗体

更多关于uni-app 子窗体不会销毁的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 子窗体不会销毁的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的子窗体生命周期管理问题。在uni-app中，子窗体确实存在不会随页面自动销毁的情况，这会导致事件监听混乱。

问题分析：

  1. 子窗体未销毁：当从页面A跳转到页面B时，页面A中的子窗体实例仍然存在
  2. 事件监听冲突：uni.$on是全局事件监听，多个子窗体实例会同时响应同一个事件
  3. 实例引用问题：uni.$on只能控制最后创建的子窗体实例

解决方案：

方案一：使用页面级事件通信（推荐）

// 在页面A中
export default {
  onLoad() {
    // 获取当前页面实例
    const currentPage = getCurrentPages().pop()
    // 使用页面级事件
    currentPage.$on('customEvent', (data) => {
      // 处理子窗体逻辑
    })
  },
  onUnload() {
    // 页面卸载时销毁子窗体
    if(this.subNVue) {
      this.subNVue.hide()
    }
  }
}

方案二：手动管理子窗体生命周期

// 在页面A中
export default {
  data() {
    return {
      subNVue: null
    }
  },
  onLoad() {
    // 创建子窗体时保存引用
    this.subNVue = uni.getSubNVueById('subNvueId')
  },
  onShow() {
    // 页面显示时显示子窗体
    if(this.subNVue) {
      this.subNVue.show()
    }
  },
  onHide() {
    // 页面隐藏时隐藏子窗体
    if(this.subNVue) {
      this.subNVue.hide()
    }
  },
  onUnload() {
    // 页面销毁时关闭子窗体
    if(this.subNVue) {
      this.subNVue.close()
      this.subNVue = null
    }
  }
}

方案三：使用唯一标识区分不同页面的子窗体

// 在页面A中
const pageId = Date.now() // 生成唯一页面标识

// 发送事件时带上页面标识
uni.$emit('controlSubNVue', {
  pageId: pageId,
  action: 'show'
})

// 子窗体中判断是否属于当前页面
uni.$on('controlSubNVue', (data) => {
  if(data.pageId === this.pageId) {
    // 执行对应操作
  }
})
回到顶部