uniapp 使用subNVue原生子窗体解决web-view等原生页面中弹框无法显示的问题

Posted 2022-12-07 mqy1023

问题: 使用web-view或者video组件时，h5端的编写的fixed布局或其他popup弹框页面无法显示

解决方案：使用subNVue这个原生子窗体的方法去解决APP端打开弹窗显示弹窗被覆盖

注意事项： 1、subNVue这个原生子窗体的后缀必须是.nue
2、样式不支持scss，只能一个个样式.className 不能嵌套
3、subNVue只支持在手机上运行

官方：uni-app subNVue 原生子窗体开发指南

一、创建一个shareSubNVue文件夹，文件夹下创建一个popup.nvue文件

<template>
	<view class="page">
		<view class="pop-content">
			<view class="pop-item" @click="clickFun('1')">
				<image src="../../../static/share1.png" class="pop-image" mode="widthFix"></image>
				<view>微信</view>
			</view>
			<view class="pop-item" @click="clickFun('2')">
				<image src="../../../static/share2.png" class="pop-image" mode="widthFix"></image>
				<view>朋友圈</view>
			</view>
			<view class="pop-item" @click="clickFun('3')">
				<image src="../../../static/share3.png" class="pop-image" mode="widthFix"></image>
				<view>COPY链接</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default 
		data() 
			return 
			;
		,
		created() 
			const vm = this;
			// 接收信息的页面
			uni.$on('from-parent', (data) => 
				uni.showToast(
					title: data.type + ', ' +  data.content
				)
				switch (data.type) 
					case '1':
						break;
					case '2':
						break;
					case '3':
						break;
						// .... 
				
			);
		,
		beforeDestroy() 
			// 页面销毁之前 移除监听器
			uni.$off('from-parent');
		,
		methods: 
			clickFun(type) 
				let content = '';
				if (type == '1') 
					content = '子参数1';
				 else if (type == '2') 
					content = '子参数2';
				 else if (type == '3') 
					content = '子参数3';
				

				// 获取当前 subNVues 原生子窗体的实例。
				const subNVue = uni.getCurrentSubNVue();
				// 向父窗体传递参数
				uni.$emit('to-parent', 
					type: type,
					content: content
				);
				// 子窗体隐藏
				// 可自定义 隐藏动画效果，时间
				subNVue.hide();

			

		
	
</script>
<!-- 不能使用scss -->
<style>
	.pop-content 
		padding: 0 40upx;
		height: 320upx;
		width: 750rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	
	.pop-item 
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
	
	.pop-image 
		width: 120upx;
		margin-bottom: 10rpx;
	
</style>

二、pages.json中配置subNVue文件路径和样式配置

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		
			"path": "pages/index/index",
			"style": 
				"navigationBarTitleText": "SubNView demo",
				"app-plus": 
					"titleNView": 
						"buttons": [
							"text": "分享", //需要显示的文字
							"fontSize": "15", //字号
							"float": "right", //浮动
							"color": "#FFFFFF", //字体颜色
							"width": "auto" //设置宽度
						]
					,
					"subNVues": [
						"id": "popup", // 唯一标识id
						"path": "pages/index/shareSubNVue/popup", // 页面路径  
						"type": "popup",  //原生子窗口内置样式，可取值：'popup',弹出层；"navigationBar",导航栏
						"style":  // 底部显示
							"position": "absolute",
							"margin":"auto",
							"width":"100%",
							"height": "320upx",
							"bottom": "0"
						
					]
				
			
		
	],

三、页面中调用

父子页面传输数据，使用uni.$emit方法去实现要传递的数据， 使用uni.$on方法去实现接收数据

uni.$emit('data-send',  )

uni.$on('data-send', data =>  )

index.vue 中调启子窗口

const subNVue = uni.getSubNVueById('popup'); //  对应page.json的id

// 向子窗体传递参数
uni.$emit('from-parent',
	type: '1',
	content: '父给子参数1'
)

// 1:子窗体从顶部进入（动画效果）, 2:显示原生子窗体的动画持续时间
subNVue.show('slide-out-top', 250)

Gitee代码地址：https://gitee.com/mqy1023/SubNViewDemo

页面效果如下