UNI-APP_subNVue原生子窗口使用，web-view层级问题解决

小歪 | 前端

已于 2023-07-05 18:07:12 修改

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # UNI-APP 文章标签： uni-app 前端

于 2023-07-05 18:03:12 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44599931/article/details/131561036

UNI-APP 专栏收录该内容

121 篇文章

订阅专栏

文章介绍了如何在H5和App中配置并使用subNVues原生子窗口，包括在pages配置文件中设定subNVues，创建nvue文件，以及通过uni.getSubNVueById方法显示子窗口。同时，强调了nvue的CSS开发规范和页面通信方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

subNVues文档
 app-subnvues文档
 subNVues开发指南

需求：在pages/cloud_control/index页面使用subNVue原生子窗口

1.pages文件配置

"app-plus": {
	"bounce": "none",
	"subNVues":[{
		"id": "control_popup",
		"path": "pages/cloud_control/subNVue/control_popup",
		"style": {  
			"position": "popup",
			"margin":"auto",
			"background": "transparent"
		}  
	}]  
}

创建文件 pages/cloud_control/subNVue/control_popup
官方推荐在使用页面的同级创建subMVue文件保存nvue文件，我这里在cloud_control/index使用
当然你也可以提供公共的 subNVue 子窗体，供多个 vue 页面引用，此时我们建议放在最外层与 pages 文件同级的 platform\app-plus\subNVue 下

在这里插入图片描述

control_popup.nvue 示例

<template>
	<view class="">
		<text>原生子窗体显示成功</text>
	</view>
</template>

2.使用

control_popup为配置时的id，需要对应才能打开相应的子窗口

onReady() {
	// #ifdef APP-PLUS
	const control_popup = uni.getSubNVueById('control_popup')
	control_popup.show('slide-in-left', 300, function(){
		console.log('subNVue 原生子窗体显示成功');
	});
	// #endif
},

在这里插入图片描述

使用 uni.$emit 和 uni.$on 进行页面通信

注意：nvue里css开发需要遵守weex的开发规范，不支持百分比，必须要设置尺寸等