超级会员免费看
uni-app中，原生组件如map、video存在层级过高的问题，导致前端组件无法覆盖。为解决此问题，uni-app提供了cover-view和cover-image组件，以及App端的plus.nativeObj.view和subNVue方案。微信小程序已支持video和map的同层渲染，但App端的原生导航栏、tabbar等仍无法被覆盖，需使用特定方案。此外，Android系统主题字体会影响原生组件的渲染效果。
一、原生组件说明
小程序和App的vue页面，主体是webview渲染的。为了提升性能，小程序和App的vue页面下部分ui元素，比如导航栏、tabbar、video、map使用了原生控件。这种方式被称为混合渲染。
虽然提升了性能，但原生组件带来了其他问题：
- 前端组件无法覆盖原生控件的层级问题
- 原生组件不能嵌入特殊前端组件(如scroll-view)
- 原生控件ui无法灵活自定义
- 原生控件在Android上，字体会渲染为rom的主题字体，而webview如果不经过单独改造不会使用rom主题字体
H5、App的nvue页面，不存在混合渲染的情况，它们或者全部是前端渲染、或者全部是原生渲染，不涉及层级问题。
uni-app 中原生组件清单如下：
-
map
-
video
-
camera（仅微信小程序、百度小程序支持）
-
canvas（仅在微信小程序、百度小程序表现为原生组件）
-
input（仅在微信小程序、支付宝小程序、字节跳动小程序、QQ小程序中且input置焦时表现为原生组件，其中支付宝小程序的input仅为text
订阅专栏 解锁全文
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
