【subNVue】uni-app手機調試無法顯示地圖Map之外組件的問題及解決

問題描述

參照官網在<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)