Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
nozer1993
uni-app
提交
18044d33
U
uni-app
项目概览
nozer1993
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
18044d33
编写于
12月 07, 2019
作者:
W
wanganxp
提交者:
GitHub
12月 07, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update native-component.md
上级
9002d92d
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
13 addition
and
8 deletion
+13
-8
docs/component/native-component.md
docs/component/native-component.md
+13
-8
未找到文件。
docs/component/native-component.md
浏览文件 @
18044d33
...
@@ -2,7 +2,11 @@
...
@@ -2,7 +2,11 @@
小程序和App的vue页面,主体是webview渲染的。为了提升性能,小程序和App的vue页面下部分ui元素,比如导航栏、tabbar、video、map使用了原生控件。这种方式被称为混合渲染。
小程序和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页面,不存在混合渲染的情况,它们或者全部是前端渲染、或者全部是原生渲染,不涉及层级问题。
H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是前端渲染、或者全部是原生渲染,不涉及层级问题。
...
@@ -11,7 +15,7 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是
...
@@ -11,7 +15,7 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是
*
[
video
](
/component/video
)
*
[
video
](
/component/video
)
*
[
camera
](
/component/camera
)
(仅微信小程序、百度小程序支持)
*
[
camera
](
/component/camera
)
(仅微信小程序、百度小程序支持)
*
[
canvas
](
/component/canvas
)
(仅在微信小程序、百度小程序表现为原生组件)
*
[
canvas
](
/component/canvas
)
(仅在微信小程序、百度小程序表现为原生组件)
*
[
input
](
/component/input
)
(仅在微信小程序、
百度小程序、支付宝小程序、头条小程序中且input置焦时
表现为原生组件)
*
[
input
](
/component/input
)
(仅在微信小程序、
支付宝小程序、头条小程序、QQ小程序中且input置焦时表现为原生组件,其中支付宝小程序的input仅为text且置焦时才
表现为原生组件)
*
[
textarea
](
/component/textarea
)
(仅在微信小程序、百度小程序、头条小程序表现为原生组件)
*
[
textarea
](
/component/textarea
)
(仅在微信小程序、百度小程序、头条小程序表现为原生组件)
*
[
live-player
](
/component/live-player
)
(仅微信小程序、百度小程序支持,App端直接使用video组件可同时实现拉流)
*
[
live-player
](
/component/live-player
)
(仅微信小程序、百度小程序支持,App端直接使用video组件可同时实现拉流)
*
[
live-pusher
](
/component/live-pusher
)
(仅微信小程序、百度小程序、app-nvue支持,app-vue使用plus.video.LivePusher可实现推流)
*
[
live-pusher
](
/component/live-pusher
)
(仅微信小程序、百度小程序、app-nvue支持,app-vue使用plus.video.LivePusher可实现推流)
...
@@ -34,26 +38,27 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是
...
@@ -34,26 +38,27 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是
#### 其他原生界面元素
#### 其他原生界面元素
除了原生组件外,uni-app在非H5端还有其他原生界面元素,清单如下:
除了原生组件外,uni-app在非H5端还有其他原生界面元素,清单如下:
*
原生
导航栏
和tabbar(pages.json里配置的)。
*
原生
navigationBar
和tabbar(pages.json里配置的)。
*
web-view组件虽然不是原生的,但这个组件相当于一个原生webview覆盖在页面上,并且小程序上web-view组件是强制全屏的,无法在上面覆盖前端元素
*
web-view组件虽然不是原生的,但这个组件相当于一个原生webview覆盖在页面上,并且小程序上web-view组件是强制全屏的,无法在上面覆盖前端元素
*
弹出框:picker、showModal、showToast、showLoading、showActionSheet、previewImage、chooseImage、chooseVideo等弹出元素也无法被前端组件覆盖
*
弹出框:picker、showModal、showToast、showLoading、showActionSheet、previewImage、chooseImage、chooseVideo等弹出元素也无法被前端组件覆盖
*
plus下的plus.nativeObj.view、plus.video.LivePusher、plus.nativeUI、plus.webview,层级均高于前端元素
*
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页面层级覆盖解决方案
#### vue页面层级覆盖解决方案
为了解决webview渲染中原生组件层级最高的限制,uni-app提供了
[
cover-view
](
/component/cover-view
)
和
[
cover-image
](
/component/cover-view?id=cover-image
)
组件,让其覆盖在原生组件上。
为了解决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
](
https://uniapp.dcloud.io/component/cover-view?id=cover-view
)
`cover-view`
只能覆盖原生组件,不能覆盖其他原生界面元素。比如cover-view可以覆盖video、map,但无法覆盖原生导航栏、tabbar、web-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
另外cover-view无论如何都无法解决原生导航栏、tabbar、web-view组件的覆盖,为此App端补充了2个层级覆盖方案plus.nativeObj.view和subNVue
...
@@ -73,7 +78,7 @@ subNVue是把weex渲染的原生子窗体,覆盖在vue页面上,它解决了
...
@@ -73,7 +78,7 @@ subNVue是把weex渲染的原生子窗体,覆盖在vue页面上,它解决了
uni-app支持在App端弹出半透明的nvue窗体。即看起来是在本窗体弹出一个元素,但实际上是弹出了一个部分区域蒙灰透明的新窗体。这样的窗体比subnvue有个优势就是可以全局复用。具体参考这个
[
插件
](
https://ext.dcloud.net.cn/plugin?id=953
)
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。
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录