uni-app 安卓手机使用2个原生子窗口subNVue加canvas绘画 会导致‘返回键’出bug

uni-app 安卓手机使用2个原生子窗口subNVue加canvas绘画 会导致‘返回键’出bug

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

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：macOS Catalina 10.15.2 Beta版(19C56a)

HBuilderX类型：Alpha

HBuilderX版本号：3.1.10

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：小米9

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

页面代码在附件里。
pages.json里的页面配置：

```json
{
    "path" : "pages/live-video/live-video",
    "style" : {
        "navigationBarTitleText":"",
        "app-plus": {
            "titleNView": {
                "buttons": [
                    {
                        "text": "\ue667",
                        "fontSrc":"/static/font_eibktlmzo5/iconfont.ttf",
                        "fontSize": "36rpx",
                        "width": "40px",
                        "float": "right"
                    }
                ]
            },
            "subNVues":[
                {
                    "id": "concat", // 唯一标识
                    "path": "pages/live-video/subnvue/subnvue", // 页面路径
                    "type": "popup",
                    "style": {
                        "width": "100%",
                        "height": "451rpx",
                        "position": "absolute",
                        "bottom":"0"
                    }
                },
                {
                    "id": "concatHB", // 唯一标识
                    "path": "pages/live-video/subnvue/subnvueHB", // 页面路径
                    "type": "popup",
                    "style": {
                        "width": "690rpx",
                        "height": "1134rpx",
                        "margin": "auto",
                        "bottom":"130rpx",
                        "background": "transparent"
                    }
                }
            ]
        }
    }
}

操作步骤：

调用附件里live-video.vue里的openNvue方法，打开原生子窗口subnvue.nvue，再从subnvue.nvue窗口给live-video.vue里uni.$on('page-popup')通信来关闭subnvue.nvue并调用drawShareImage()和openNvueHB()，进行canvas绘画和打开subnvueHB.nvue子窗口。

预期结果：

操作完上述步骤后，使用‘返回键’能返回到上一页。

实际结果：

操作完上述步骤后，使用‘返回键’能返回到上上上一页。


### bug描述：
页面上使用了2个原声子窗口加canvas绘画后，点击一次‘返回键’，会触发多次返回效果。

更多关于uni-app 安卓手机使用2个原生子窗口subNVue加canvas绘画 会导致‘返回键’出bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 安卓手机使用2个原生子窗口subNVue加canvas绘画 会导致‘返回键’出bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app在Android平台上的subNVue与Canvas交互时的返回键事件冒泡问题。当同时存在多个subNVue窗口且涉及Canvas操作时，系统返回键事件可能会被重复触发。

主要原因是：

  1. subNVue原生窗口在关闭时未能完全清理事件监听
  2. Canvas绘制操作可能影响了页面的事件栈
  3. 多个subNVue窗口叠加时事件传递出现异常

建议解决方案：

  1. 在关闭subNVue窗口时显式调用subNVue.hide()并设置延迟
  2. 在Canvas绘制完成后手动管理页面生命周期
  3. 使用uni.onKeyDown监听返回键并自定义处理逻辑

代码示例：

// 监听返回键
uni.onKeyDown((e) => {
  if(e.keyCode === 1001) { // 返回键
    // 自定义返回逻辑
    this.handleBack()
    return true // 阻止默认行为
  }
})
回到顶部