subNvue界面的基础使用

为何要使用subNvue

        nvue属于原生渲染，会有很多插件只能在nvue里使用，但是nvue里很多功能都不支持，更是不能将Nvue界面做成组件引入vue界面。uni-app已经支持 nvue 的原生渲染，因此用原生子窗体subNvue来实现更加全面的功能。

代码部分

路由表代码部分

首先要在pages.json(路由表）里配置主页面以及在主页面上显示的nvue界面

• id：用于唯一标识这个子nVue的属性。
• path：指定了子nVue的页面路径，即该子nVue的渲染内容将显示在哪个页面上。
• type：指定了子nVue的类型，这里是"popup"，表示弹出层的类型。
• style：定义了子nVue的样式属性，这里设置了一些样式属性，如边距(margin)、宽度(width)、高度(height)、顶部偏移(top)和遮罩(mask)。

{
			"path": "pages/work/cameras/index",
			"style": {
				"navigationStyle": "custom" ,// 隐藏系统导航栏
				"navigationBarTitleText": "平台",
				"app-plus": {
					"popGesture": "none",//禁止手机侧滑返回
					"subNVues": [
						{
							"id": "subNVue-id",//唯一标识
							"path": "pages/work/cameras/play",
							"type": "popup",
							"style": {
								"margin": "auto",
								"width": "100%",
								"height": "400rpx",
								"top": "150rpx",
								"mask": "flast"
								
							}
						}
					]
				}
			}
		},

vue主页面将参数传递给子页面

调用openNvue事件即可唤出subNvue界面

openNVue() {
				// 通过 ID 获取 subNVues 原生子窗体的实例
				const subNVue = uni.getSubNVueById('subNVue-id');
				let transmission = {
					"playState": this.playState,
					"buildId": this.buildId,
					"cameraIndexCode": this.cameraIndexCode,
					"startTime": this.startTime,
					"endTime": this.endTime,
				}
				// 向子窗体传递参数
				uni.$emit('hello-popup', transmission)
				// 1:子窗体从顶部进入（动画效果）, 2:显示原生子窗体的动画持续时间
				subNVue.show('slide-out-top', 250);
			},

 分别调用change和Nochange可以更改指定（通过subNvue的id）subNvue界面的高度等

请注意，当你将高度改为百分比后，再将高度改为rpx是不起效果的。而且subNvue页面显示的优先级是最高的，无法被覆盖

change() {
				let subNVue = uni.getSubNVueById('subNVue-id');
				// 设置子窗口高度和宽度
				subNVue.setStyle({
					width: '100%',
					height: '100%',
					top: '0rpx',
				});
			},
Nochange() {
				let subNVue = uni.getSubNVueById('subNVue-id');
				// 设置子窗口高度和宽度
					subNVue.setStyle({
						width: '100%',
						height: '25%',
						top: '10%',
				})
			},

nvue子页面接收主页面传来的参数

须要在created里接收父页面传递过来的参数，即data

created() {
			// 接收父页面的信息
			uni.$on('hello-popup', (data) => {
                console.log(data)
			});
		},

nvue子页面向父页面传递参数

// 向主页面传输数据
transmission(e) {
				uni.$emit('hello-vue', {
					'state': e,
					'screenState': this.screenState,
				})
			},

vue父页面接收子页面传来的参数

onLoad(options) {
			uni.$on('hello-vue', (data) => {
				// 处理接收到的参数
			});
            }

逻辑完善

在nvue界面移除监听器，逻辑闭环

beforeDestroy() {
			// 页面销毁之前 移除监听器
			uni.$off('hello-popup');
			this.$refs.KJHatomPlayer.stop();
		},

在vue页面一定要有生命周期钩子函数，不然会有关闭逻辑错误

// 生命周期的钩子函数
		created() {
			plus.key.addEventListener("backbutton", function() {
			});
		},

后言

查阅很多资料，subNvue其实还不算完善，官方文档也有瑕疵。但是这已经是我能找到最好的方法了。在下才疏学浅，难免有所不足，大家碰见文章错误还请大家多多批评。