subNVue 原生子窗体的使用

Myth丶恋晨 2023-03-06 03:37 8阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]

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

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

<template>
        <div class="wrapper">
    	
    		<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  
![在这里插入图片描述][format_png 1]

<template>
        <div class="wrapper">
    		<div class="status-bar"></div>
    		<div class="nav">
    			<text class="back" @click="back"></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"
    				
    			}]
    		}
    	}
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/0f167556383f41d3a2b76cb5ae69b5ac.png
[https_ask.dcloud.net.cn_article_35948]: https://ask.dcloud.net.cn/article/35948
[format_png]: /images/20230208/cafd915e231c47be93a36acd7c0440b4.png
[format_png 1]: /images/20230208/67945d2244f34da694c4170b754a3760.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230208/bc27c7a3a1074ea78cb56f1468c99a13.png