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

怼烎@ 2023-06-28 08:48 9阅读 0赞

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同级目录需要注意坑

![20200108115112411.jpg][]

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
    	},

[20200108115112411.jpg]: https://img-blog.csdnimg.cn/20200108115112411.jpg