uni-app原生子窗体subnvue

在使用uniapp进行开发app时，由于部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件，会使一些组件被挡在下面，很多人会想到使用cover-view（cover-view
覆盖在原生组件上的文本视图。）这个组件，但是这个在h5端调试的时候是可以的，在app真机调试时还是不行（其他端我没试过）附上代码

cover-view
<cover-view style="height: 600rpx;position: relative;">
	这是文本
<input style="position: absolute;bottom: 0;" type="text" value="" placeholder="这是输入框" />
</cover-view>
<view class="map-box">
	<map  :longitude="longitude" :latitude="latitude" :scale="scale"> </map>
</view>

h5端
app真机调试

使用subnvue可以解决上面的问题，下面进入正题

1. 注册
   先传建一个.nvue文件，找到pages.json在需要使用到原生窗体的页面进行注册

{
	"path": "pages/index/index",
	"style": {
		"navigationStyle": "custom",
		"app-plus": {
			"titleNView": false, //不启用系统导航
			"subNVues": [{
				"id": "search", // 唯一标识  
				"path": "pages/index/search.nvue", // 原生子窗口页面文件路径  
		//"type": "popup",  //原生子窗口内置样式，可取值：'popup',弹出层；"navigationBar",导航栏
				"style": {//原生子窗口的页面样式
					"width":"100%",
					"height": "100%",
					"background": "transparent"
				}
			}]
		}
	}
},

然后在需要引入的文件中

onLoad() {
	const subNvue = uni.getSubNVueById('search') //这里的id要和pages.json中的id保持一致
	subNvue.show()
}

这里要用真机调试，h5页面调试会报错，这样的话就能够将输入框展现在页面上了（下图为真机调试页面）

2.样式问题
nvue文件的样式是不支持z-index的，如果想要将某些元素通过定位来展示到最前面的话，需要将该元素写在后面（在页面上越靠后的元素层级越高）
元素的宽度是默认100%的（这个我不太敢确定，我目前碰到的是这样，如有口误欢迎订正），如果想要设置居中的话直接写左右的padding一致就可以
布局不能写百分比
如果想要动态的高度可以在html中写:style来实现（就跟正常的vue文件一样）
不支持媒体查询
不支持 class 以外的选择器
不能使用css简写，例如

input{
	border:2rpx solid #f00;
	transiton:all liner 1s;
}

在nvue文件中必须写为

input{
	border-style:solid;
	border-color:#f00;
	border-width:2rpx;
	transition-property: width;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

具体请参考https://uniapp.dcloud.io/nvue-css

3. 通信
   在与使用nvue文件的页面进行通讯时，可以使用

uni.$emit(eventName,OBJECT)和uni.$on(eventName,callback)

4. 发送请求
   尽量不要在原生子窗体里发送请求，容易出现好多问题（踩过坑的路过），可以在使用原生子窗体的页面发送请求再把数据传过去
5. 专用组件
   在有滚动列表的需求时尽量使用 list 和 cell 组件，具体请参考https://uniapp.dcloud.io/component/list
6. 数据交互
   和正常的vue文件用法一样，没有什么特别之处。