uniapp 在app端使用nvue来解决视频层级过高

1.在pagejson中申明nvue

{
			"path": "pages/detail/detail",
			"style": {
				"navigationBarTitleText": "商品详情",
				"app-plus": {
					"titleNView": false,
					"subNVues": [{
						"id": "goodsBottom",
						"path": "pages/detail/subnvue/goodsBottom",
						"style": {
							"type": "popup",
							"position": "dock",
							"dock": "bottom",
							"width": "750upx",
							"height": "100upx",
							"zindex": 2
						}
					},
					{
						"id": "goodsSpec",
						"path": "pages/detail/subnvue/goodsSpec",
						"type": "popup",
						"style": {
							"width": "750upx",
							"top":  "20%",
							"bottom": "0upx",
							"zindex": 3

						}
					},{
						"id": "coupon",
						"path": "pages/detail/subnvue/coupon",
						"type": "popup",
						"style": {
							"width": "750upx",
							"top":  "50%",
							"bottom": "0upx",
							"zindex": 3
						}
					},{
						"id": "share",
						"path": "paltform/app-plus/subNVue/shareDetail",//这个放在pages外部目录的nvue
						"type": "popup",
						"style": {
							"width": "750upx",
							"height":"250upx",
							"bottom": "0upx",
							"zindex": 3
						}
					}]
				}
			}
		}

2.要是放在pages同级目录需要注意坑

3.vue和nvue之间的通讯

①在vue向nvue通讯

methods:{

    collect(){
        // #ifdef APP-PLUS
            //触发监听  并传值
			uni.$emit('goods_bottom_setval',{isCollected:this.isCollected})
		// #endif
    }

}

②在nvue

    created() {
              //监听vue中的事件
			const vm = this;
			uni.$on('goods_spec_setval', (data) => {

				console.log('goods_spec_setval', data.product)
				this.detail=data.detail
				for (var key in data) {
					vm[key] = data[key]
				}
				// vm.title = data.title;
				// vm.content = data.content;
				//console.log(vm.product.Products_JSON.imgPath)
			})
		},
		beforeDestroy() {
			uni.$off('goods_spec_setval')
		},
		methods: {
			toHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			addCart() {
				// if (!this.$fun.checkIsLogin(1, 1)) {
				//     return;
				// }
				uni.$emit('cartHandle', {});
                //向vue发送监听  cartHandle   vue页面监听
			},
			directBuy() {

				// if (!this.$fun.checkIsLogin(1, 1)) {
				//     return;
				// }
				uni.$emit('directHandle');
			},
			lingqu() {
				if (this.canSubmit) {
					this.$emit('goGet')
				}
			}
		}

③在vue页面的监听和取消监听

onLoad: function (option) {

		// #ifdef APP-PLUS
            //条件编译只在app才会使用nvue  监听nvue传递的函数
			const vm = this;

            //控制nvue的显示和隐藏  show  hide 通过pages.json的id
			const subNVue2 = uni.getSubNVueById('goodsBottom')
			subNVue2.show()


		uni.$on('cartHandle', (data) => {
			vm.addCart()        //调用vue当前的方法
		})
		uni.$on('directHandle',(data)=>{
			vm.directBuy()
		})

		uni.$on('kefu', (data) => {
			vm.contact()
		})

		uni.$on('collectHandle',(data)=>{
			console.log('触发收藏事件')
			vm.collect()
		})
		uni.$on('getMyCoupon',(data)=>{
			console.log('触发领取事件')
			vm.getMyCoupon(data.item,data.i)
		})
		uni.$on('goNextPage',(data)=>{
			console.log('触发优惠券下一页事件')
			vm.goNextPage()
		})

		uni.$on('shareDetail',(data)=>{

			if(data.detail!='detail') return
				console.log('触发普通详情分享')
				vm.shareFunc(data.item)


		})

		uni.$on('goodsSkuSub',(data)=>{
			if(data.detail!='detail') return    //因为多个使用同一nvue  所以根据传递的值 判断，不然后多个地方触发
			console.log('触发这么多次事件????')
			let {check_attr,check_attrid_arr,submit_flag,postData} = data
			this.check_attr = check_attr
			this.check_attrid_arr = check_attrid_arr
			this.submit_flag = submit_flag
			this.postData = postData
			vm.skuSub()
			//隐藏规格框
			const goodsSpecNvue = uni.getSubNVueById('goodsSpec')
			goodsSpecNvue.hide()
		})


		uni.$on('goGet',(data)=>{
			console.log('触发立即领取')
			vm.lingqu()
		})
		// #endif


	 },

	mounted(){

	},
	onUnload(){
		// #ifdef APP-PLUS
               //条件编译 关闭监听 如果不写关闭 在安卓会卡死重启
			uni.$off('cartHandle')
			uni.$off('directHandle')

			uni.$off('collectHandle')
			uni.$off('getMyCoupon')
			uni.$off('goNextPage')

			uni.$off('shareDetail')
			uni.$off('kefu')

			uni.$off('goodsSkuSub')

			uni.$off('goGet')
		// #endif
	},