【subNVue】uni-app手机调试无法显示地图Map之外组件的问题及解决

2022-01-12 21:29:03

问题描述

参照官网在<map>标签里嵌套使用<cover-view>，在浏览器调试可以正常使用，但是在手机APP调试时无法正常显示，一顿百度之后找到原因是vue页面的地图会默认置位最顶层，甚至连导航栏都会覆盖掉，而<cover-view>只适用于小程序且修改z-index也不管用。有的资料说使用nvue页面代替vue页面可以实现，但是nvue页面局限太大，很多东西都无法使用，如导入的ColorUI、onload时获取组件高度宽度甚至api在手机app中都无法调用，因此并不想把写好的整个页面都重写。然后发现了 原生子窗体subNVue，只需要将需要的组件写成nvue页面，以一个原生的popup弹出组件，省去了不少烦恼和工作量。

解决方案

将组件单独写成nvue页面并使用

step1：配置页面

修改page.json文件，添加nvue页面的路径，如：

{  
    "pages": [{  
        "path": "pages/map/map", // 地图目录  
        "style": {  
        	"navigationStyle": "custom"， // 使用自定义的导航栏
            "app-plus": {  
                "subNVues":[{  
                    "id": "subId", // 唯一标识  
                    "path": "pages/map/coverView", // 页面路径 
                    "style": {  // 详见官方文档
                        "position": "absolute",  
                        "top": "200rpx",
                        "width": "700rpx",  
                        "height": "50%",  
                        "background": "transparent",  // 背景透明
                        "mask": "rgba(0, 0, 0, 0.4)"  // 周围底色
                    }  
                }]  
            }  
        }  
    }]  
}

完整配置

step2：新建页面

根据如上设置的subNVue的路径path新增.nvue文件，注意规范即可

step3：组件调用

map页面根据唯一标识id来调用

// 显示
uni.getSubNVueById("subId").show("soom-fade-out")  // soom-fade-out为显示动画
// 隐藏
uni.getSubNVueById("subId").hide()  // soom-fade-out为显示动画

step4：数据传输

map主页面与nvue子组件相互传值和调用可以通过emit和on来实现
数据接受方监听：

// 开启监听
uni.$on("eventName", (data) => {
	console.log(data)
})
// 取消监听
uni.$off("eventName")

数据发送方触发：

uni.$emit("eventName", data)