uniapp子窗体的使用与传参

秒速五厘米 2021-08-19 17:01 671阅读 0赞

前言：以下分享的是子窗体显示/隐藏和父窗体与子窗体之间的通信（传值）;为什么使用子窗体？比如项目中有类似地图这样的功能，如果页面有弹窗的话会被地图所遮挡，或者有弹窗的层不高无法遮挡原生顶部这时就需要子窗体来实现该弹窗了，例如：页面中的弹出分享、客服、通知之类的弹窗都可以使用子窗体实现…

--------------------

[uniapp地图-删除标记点][uniapp_-]

[uniapp地图-标记点-多点连线][uniapp_-_-]

--------------------

## 最终效果-gif图片：   ![在这里插入图片描述][20200103201604970.gif] ##

现在来看看demo结构~

PS：子窗体不适合复用;也就是说图中的upup.nvue这个子窗体只能给index.vue的页面用，pages.json的命名的子窗体ID也只能是唯一的。不按照以上规则的话记得是子窗体可以被复用但是有问题（可以以去测试，这个是我目前遇到的问题，也是坑~）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]

--------------------

现在讲一下upup.nvue这个文件;也就是子窗体。  
在新建子窗体他默认的是DIV标签，我就这里就不使用VIEW标签了。  
注意的地方：CSS语法问题;比如在普通的HTML或者vue文件，css的border你可以这样写“border:1px solid red”在子窗体就不一样了，他必须要写成“border-color: red;border-style: solid;border-width: 1px;”，还有背景颜色这块在子窗体写成“background”是不行的，需要写成“background-color”才可以  
PS：具体语法可以看看[weex地址][weex]的语法

<template> <div class="hes" @click="stopEvent"> <div class="content"> 内容内容内容内容内容内容内容内容内容内容内容 </div> <button class="esc" @click="escNvue">关闭子窗体</button> </div> </template> <script> export default { 
    		data() { 
    			return { 
    
    			}
    		}, onUnload() { 
    			//关闭传参-通信
    			uni.$off('updata')
    		}, onLoad() { 
    			//接收全局传参-通信 uni.$on('updata',(data)=>{ 
    				console.log(data)
    			})
    		}, methods: { 
    			//阻止冒泡 stopEvent(e) { 
    				e.stopPropagation();
    			}, escNvue(){ 
    				// uni.$emit('escNvue','');
    				
    				const subNVue = uni.getSubNVueById('Nvueshare')
    				
    				// slide-in-bottom			是关闭动画
    				// 关闭 nvue 子窗体  
    				subNVue.hide('zoom-fade-in', 300)
    			}
    		}
    	}
    </script> <style> .hes { 
    		position: fixed;
    		top: 0;
    		left: 0;
    		width: 750rpx;
    		border-color: red;
    		border-style: solid;
    		border-width: 1px;
    	}
    	
    	.content{ 
    		height: 300rpx;
    		margin: 30rpx;
    		border-color: blue;
    		border-style: solid;
    		border-width: 1px;
    	}
    	
    	.esc{ 
    		margin: 0 30rpx;
    	}
    </style>

--------------------

**下面说说子窗体是如何引用到当前页面去的，以及显示的动画**

在pages.json文件引用子窗体  
PS：宽高不设置的话默认100%的;这里就相当于定义的函数但是还没有被调用的状态，配置很简单，具体的参数可以去官网看看就可以了~

地址：[https://uniapp.dcloud.io/api/window/subNVues?id=api][https_uniapp.dcloud.io_api_window_subNVues_id_api]

{ 
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{ 
    			"path": "pages/index/index", "style": { 
    				"navigationBarTitleText": "高德地图", "app-plus": { 
    						"subNVues": [
    							{ 
    								"id": "Nvueshare", // 唯一标识 "path": "pages/index/nvue/upup", // 子窗体路径 "type": "popup", "style": { 
    									"position": "absolute",
    									"dock": "bottom",
    									"width": "750upx",
    									"height": "500upx",
    									"bottom": "0"
    								}
    							}
    						]
    					}
    				
    			}
    		}
    	], "globalStyle": { 
    		"navigationBarTextStyle": "black",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#F8F8F8",
    		"backgroundColor": "#F8F8F8"
    	}
    }

--------------------

**下一步是调用子窗体**

PS：点击触发显示

子窗体;可以显示和隐藏掉子窗体  
[窗口显示的动画][Link 1]  
[窗口关闭的动画][Link 2]

<template> <view class="content">  <map id="maps" @markertap="mktap" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polylines" scale="16"></map> <button @tap="showNvue">弹窗</button> </view> </template> <script> export default { 
    		data() { 
    			return { 
    				latitude: '',//纬度
    				longitude: '',//经度
    				markers:[],//标记点数组
    				polylines:[]//连续数组
    			}
    		}, methods: { 
    			// 显示子窗体 showNvue(){ 
    				// 通过 id 获取 nvue 子窗体
    				const subNVue = uni.getSubNVueById('Nvueshare')
    				// 打开 nvue 子窗体  
    				// slide-in-bottom		是显示动画
    				subNVue.show('slide-in-bottom', 300)
    				
    				//全局传参updata=传参名称;打开了子窗体=参数
    				uni.$emit('updata','打开了子窗体')
    			},
    		}
    	}
    </script> <style scoped lang="scss"> .content { 
    		position: absolute;
    		width: 100%;
    		height: 80%; #maps { 
    			width: 100%;
    			height: 100%;
    		}
    	}
    </style>

[uniapp_-]: https://blog.csdn.net/qq_34227291/article/details/103791125
[uniapp_-_-]: https://blog.csdn.net/qq_34227291/article/details/102884966
[20200103201604970.gif]: /images/20210724/867101ee90994959be3e1fe45cbd5e68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: /images/20210724/a66ff5a5a7044929b51b4ef353512e26.png
[weex]: https://weex.apache.org/zh/docs/components/div.html
[https_uniapp.dcloud.io_api_window_subNVues_id_api]: https://uniapp.dcloud.io/api/window/subNVues?id=api
[Link 1]: https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeShow
[Link 2]: https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeClose