diff --git a/docs/component/native-component.md b/docs/component/native-component.md index f461d50947e2f40c007441e72808703db4475136..06c1509692a436131a192fcc5360a200e080ec59 100644 --- a/docs/component/native-component.md +++ b/docs/component/native-component.md @@ -2,7 +2,11 @@ 小程序和App的vue页面，主体是webview渲染的。为了提升性能，小程序和App的vue页面下部分ui元素，比如导航栏、tabbar、video、map使用了原生控件。这种方式被称为混合渲染。 -虽然提升了性能，但原生组件带来了其他问题：1) 前端组件无法覆盖原生控件的层级问题、2) 原生组件不能嵌入特殊前端组件(如scroll-view)、3) 原生控件无法灵活自定义。 +虽然提升了性能，但原生组件带来了其他问题： +1. 前端组件无法覆盖原生控件的层级问题 +2. 原生组件不能嵌入特殊前端组件(如scroll-view) +3. 原生控件ui无法灵活自定义 +4. 原生控件在Android上，字体会渲染为rom的主题字体，而webview如果不经过单独改造不会使用rom主题字体 H5、App的nvue页面，不存在混合渲染的情况，它们或者全部是前端渲染、或者全部是原生渲染，不涉及层级问题。 @@ -11,7 +15,7 @@ H5、App的nvue页面，不存在混合渲染的情况，它们或者全部是 * [video](/component/video) * [camera](/component/camera)（仅微信小程序、百度小程序支持） * [canvas](/component/canvas)（仅在微信小程序、百度小程序表现为原生组件） -* [input](/component/input)（仅在微信小程序、百度小程序、支付宝小程序、头条小程序中且input置焦时表现为原生组件） +* [input](/component/input)（仅在微信小程序、支付宝小程序、头条小程序、QQ小程序中且input置焦时表现为原生组件，其中支付宝小程序的input仅为text且置焦时才表现为原生组件） * [textarea](/component/textarea)（仅在微信小程序、百度小程序、头条小程序表现为原生组件） * [live-player](/component/live-player)（仅微信小程序、百度小程序支持，App端直接使用video组件可同时实现拉流） * [live-pusher](/component/live-pusher)（仅微信小程序、百度小程序、app-nvue支持，app-vue使用plus.video.LivePusher可实现推流） @@ -34,26 +38,27 @@ H5、App的nvue页面，不存在混合渲染的情况，它们或者全部是 #### 其他原生界面元素 除了原生组件外，uni-app在非H5端还有其他原生界面元素，清单如下： -* 原生导航栏和tabbar（pages.json里配置的）。 +* 原生navigationBar和tabbar（pages.json里配置的）。 * web-view组件虽然不是原生的，但这个组件相当于一个原生webview覆盖在页面上，并且小程序上web-view组件是强制全屏的，无法在上面覆盖前端元素 * 弹出框：picker、showModal、showToast、showLoading、showActionSheet、previewImage、chooseImage、chooseVideo等弹出元素也无法被前端组件覆盖 * plus下的plus.nativeObj.view、plus.video.LivePusher、plus.nativeUI、plus.webview，层级均高于前端元素 -注意：app的nvue页面里的组件虽然不涉及map、video等原生组件的层级遮挡问题，但上述“其他原生界面元素”，一样是nvue里的组件也无法遮挡的。 +注意：app的nvue页面里的组件虽然不涉及map、video等原生组件的层级遮挡问题，但pages.json中配置的原生tabbar、原生navigationBar，一样是nvue里的组件也无法遮挡的。 #### vue页面层级覆盖解决方案 为了解决webview渲染中原生组件层级最高的限制，uni-app提供了 [cover-view](/component/cover-view) 和 [cover-image](/component/cover-view?id=cover-image) 组件，让其覆盖在原生组件上。 -除了跨端的cover-view，App端还提供了2种方案：plus.nativeObj.view、subNVue。详述如下 +除了跨端的cover-view，App端还提供了3种方案：plus.nativeObj.view、subNVue、新开半透明nvue页面。详述如下 - [cover-view](https://uniapp.dcloud.io/component/cover-view?id=cover-view) `cover-view`只能覆盖原生组件，不能覆盖其他原生界面元素。比如cover-view可以覆盖video、map，但无法覆盖原生导航栏、tabbar、web-view。 -微信小程序在基础库 2.4.0 起已支持 video 组件的同层渲染。也就是video在非全屏时，可以被前端元素通过调节zindex来遮挡。但video全屏时，仍需要cover-view覆盖。 +微信小程序在基础库 2.4.0 起已支持 video 组件的同层渲染，2.7.0 起支持 map 组件的同层渲染。可以被前端元素通过调节zindex来遮挡，也支持在scroll-view等组件中内嵌这2个原生组件。但video全屏时，仍需要cover-view覆盖。 -vue页面的`cover-view`在App端相比小程序端还有一些限制，1) 无法嵌套、 2) 无法内部滚动，即cover-view无法内部出现滚动条、 3) 无法覆盖到视频的全屏界面。nvue页面的`cover-view`无这些限制。 +app-vue的`cover-view`相比小程序端还有一些限制，1) 无法嵌套、 2) 无法内部滚动，即cover-view无法内部出现滚动条、 3) 无法覆盖到视频的全屏界面。 +app-nvue的`cover-view`无这些限制。 另外cover-view无论如何都无法解决原生导航栏、tabbar、web-view组件的覆盖，为此App端补充了2个层级覆盖方案plus.nativeObj.view和subNVue @@ -73,7 +78,7 @@ subNVue是把weex渲染的原生子窗体，覆盖在vue页面上，它解决了 uni-app支持在App端弹出半透明的nvue窗体。即看起来是在本窗体弹出一个元素，但实际上是弹出了一个部分区域蒙灰透明的新窗体。这样的窗体比subnvue有个优势就是可以全局复用。具体参考这个[插件](https://ext.dcloud.net.cn/plugin?id=953) -subNVue或弹出部分区域透明的nvue页面，会比plus.nativeObj.view多占用一些内存。所以如果你要覆盖的内容很简单，cover-view或plus.nativeObj.view可以简单实现，也没必要用subNVue或nvue。 +subNVue或弹出部分区域透明的nvue页面，会比plus.nativeObj.view多占用一些内存。所以如果你要覆盖的内容很简单，cover-view或plus.nativeObj.view可以简单实现的话，就没必要用subNVue或nvue。