subNVue 原生子窗体的使用

subNvue，是 vue 页面的原生子窗体，把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面，它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件，就是一个原生子窗体

参考文档：https://ask.dcloud.net.cn/article/35948
在uniApp中App模式下使用【subNVue 原生子窗体】解决抽屉侧边栏无法覆盖map、canvas等原生组件的问题
首先创建抽屉页面drawer.nvue

<template>
    <div class="wrapper">
	<!-- 	<list class="list-wrapper">
			<cell v-for="item in lists" :key="item.id">
				<div class="text-wrapper" @click="clickitem(item.id)">
					<text style="font-size: 30upx; ">{{item.name}}</text>
					<text class="icon">&#xe583;</text>
				</div>
			</cell>
		</list> -->
		<div style="flex: 1; text-align: center;">
			<div class="close-drawer" @click="toMineInfo">
				<text style="font-size: 34upx; text-align: center;">个人信息</text>
			</div>
		</div>
		<div style="flex: 1; text-align: center;">
			<div class="close-drawer" @click="hideDrawer">
				<text style="font-size: 34upx; text-align: center;">关闭抽屉</text>
			</div>
		</div>
    </div>
</template>

<script>
    export default {
		data() {
			return {
				lists: [],
			}
		},
		beforeCreate() {
			const domModule = weex.requireModule('dom')
			domModule.addRule('fontFace', {
				fontFamily: "unibtn",
				'src': "url('../../../../static/uni.ttf')"
			});
		},
		created() {
			for(let i = 0; i < 5; i++){
				this.lists.push({
					id: i,
					name: 'Item' + i,
				});
			}
		},
        methods: {
			toMineInfo(){
				uni.navigateTo({
					url:'/pages/mine/mineInfo/mineInfo'
				})
			},
            hideDrawer() {
                uni.getCurrentSubNVue().hide('auto')
            },
			clickitem(e) {
				uni.$emit('drawer-page', e);
			}
        }
    }
</script>

<style scoped>
	.wrapper {
		flex-direction: column;
		flex: 1;
		text-align: center;
		padding: 60upx 0upx 0upx 20upx;
		background-color: #2293f7;
	}
	.nav-text {
		color: #8f8f94; 
		/* #ifndef APP-PLUS-NVUE */
		margin-bottom: 40px;
		/* #endif */
		/* #ifdef APP-PLUS-NVUE */
		margin-bottom: 40upx;
		/* #endif */
	}
	.list-wrapper {
		/* #ifdef APP-PLUS-NVUE */
		height: 450upx;
		/* #endif */
		/* #ifndef APP-PLUS-NVUE */
		height: 450px;
		/* #endif */
	}
	.text-wrapper {
		justify-content: center;
		border-bottom-style: solid;
		border-bottom-width: 1upx;
		border-bottom-color: rgba(0,0,0,.2);
		margin-bottom: 35upx;
		padding-bottom: 15upx;
	}
	.close-drawer {
		background-color: #f8f8f8;
		width: 300upx;
		padding: 15upx;
		border-radius: 20upx;
		border-style: solid;
		border-width: 1upx;
		border-color: rgba(0,0,0,.2);
	}
	.icon {
		position: absolute;
		right: 10upx;
		color: #000000;
		font-family: unibtn;
		font-size: 30upx;
		font-weight: 400;
	}
</style>

pages.json中的配置

"subPackages": [{
		"root": "pages/index",
		"pages": [ 
			{ 
				"path": "index",
				"style": {
					"navigationBarTitleText": "SubNvue",
					"app-plus": {
						"titleNView": false,
						"subNVues": [{
							"id": "drawer",
							"path": "subnvue/drawer",
							"type": "popup",
							"style": {
								"width": "70%",
								"right":"0"
								// "left":"20%"
							}
						}]
					}
				}
			}
		]
	}
]

使用【subNVue 原生子窗体】创建一个公共的导航栏
首先创建公共导航栏页面nav.nvue

<template>
    <div class="wrapper">
		<div class="status-bar"></div>
		<div class="nav">
			<text class="back" @click="back">&#xe582;</text>
			<text class="title">{{title}}</text>
		</div>
    </div>
</template>

<script>
    export default {
		data() {
			return {
				title:''
			}
		},
		beforeCreate() {
			const domModule = weex.requireModule('dom')
			domModule.addRule('fontFace', {
				fontFamily: "unibtn",
				'src': "url('../../../../static/uni.ttf')"
			});
		},
		created() {
			let that = this;
			uni.$on('setTitle', (title) => {  
			    that.title = title;
			}) 
		},
		methods: {
			back() {
				uni.navigateBack();
			}
		},
	}
</script>

<style>
	.wrapper {
		flex: 1;
		/* background-image: linear-gradient(to right, #a80077, #66ff00); */
		background-image: linear-gradient(to right, #2293f7, #2293f7);
		flex-direction: column;
	}
	.status-bar {
		flex: 1;
	}
	.nav {
		position: relative;
		height: 44px;
		flex: 0;
		justify-content: center;
		align-items: center;
	}
	.title {
			font-size: 36upx;
	}
	.back {
		position: absolute;
		left: 3px;
		color: #000000;
		font-family: unibtn;
		font-size: 54upx;
	}
</style>

pages.json中的配置

{
	"path" : "pages/mine/mineInfo/mineInfo",
	"style" : {
		"navigationStyle":"custom",
		"app-plus":{
			"subNVues":[{
				"id":"nav",
				"path":"paltform/app-plus/subNVue/nav/nav",
				"type":"navigationBar"
				
			}]
		}
	}
}