原生组件说明

小程序的 vue 页面，主体是 webview 渲染的。为了提升性能，小程序下部分ui元素，比如导航栏、 tabbar 、 video 、 map 使用了原生控件。这种方式被称为混合渲染。

虽然提升了性能，但原生组件带来了其他问题：

1. 前端组件无法覆盖原生控件的层级问题
2. 原生组件不能嵌入特殊前端组件(如 scroll-view )
3. 原生控件ui无法灵活自定义

qinjs 中原生组件清单如下：

• map
• video
• camera（仅微信小程序支持）
• input（仅在微信小程序、抖音小程序中且input置焦时表现为原生组件）
• textarea（仅在微信小程序、抖音小程序表现为原生组件）

vue 页面层级覆盖解决方案

为了解决webview渲染中原生组件层级最高的限制，qinjs 提供了 cover-view 和 cover-image 组件，让其覆盖在原生组件上。

除了跨端的 cover-view 。详述如下

• cover-view

cover-view 只能覆盖原生组件，不能覆盖其他原生界面元素。比如 cover-view 可以覆盖 video 、 map ，但无法覆盖原生导航栏、 tabbar 、 web-view 。

微信小程序在基础库 2.4.0 起已支持 video 组件的同层渲染，2.7.0 起支持 map 组件的同层渲染。可以被前端元素通过调节 zindex 来遮挡，也支持在 scroll-view 等组件中内嵌这2个原生组件。但 video 全屏时，仍需要 cover-view 覆盖。

另外 cover-view 无论如何都无法解决原生导航栏、 tabbar 、 web-view 组件的覆盖