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

问题: 使用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

页面效果如下