提升HTML5的性能体验系列之四 使用原生UI

系列文章目录导航:
- 提升HTML5的性能体验系列之一 避免切页白屏
- 提升HTML5的性能体验系列之二 列表流畅滑动
- 提升HTML5的性能体验系列之三 流畅下拉刷新
- [提升HTML5的性能体验系列之四 使用原生UI(nativeUI)]
- 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
- 提升HTML5的性能体验系列之六 降低内存占用

【本文更新时间2017-5-8】

原生UI的设计目的

\n

HTML和css有一个优势就是灵活的样式设计。
在大多数情况下,我们都应该使用HTML+css来负责UI。但是有些情况下,我们发现HTML+css的UI不满足需求。
1. 绝对置顶
HTML的video等元素,以及5+的titleNView、subnview、map、二维码扫描等原生元素,这些原生控件的层级高于div。
对于一些弹出的需要置顶的控件,会造成div模式的控件无法绝对置顶,就像在web开发里弹出的div被flash遮住一样。
使用div方式开发的如下弹出控件:alert、confirm、actionSheet、waiting、date、time、prompt、toast,都存在这个问题。
为此,HTML5+扩展了上述native级别的UI控件,保证可以绝对置顶。
2. 全屏遮罩
弹出控件时,需要对整个屏幕的其他部分做阴影遮罩。
使用div遮罩,同样无法蒙住titleNView、video、map等原生控件,也无法跨webview。
而且原生的遮罩还可以蒙住手机顶部状态条,这都是div遮罩做不到的。
HTML5+扩展的nativeUI控件,保证可以全屏遮罩。
3. 跨webview
如果界面使用webview方式的tab选项卡,但想从底部弹出一个菜单actionsheet,此时使用div方式的弹出菜单由于无法跨webview,只能看到一部分。
此时就需要使用nativeUI里的actionsheet才能跨webview。
注意:从HBuilder8起,官方推荐使用nview替代父子Webview,并计划在以后废除对同屏显示多个Webview的支持。
title部分,请使用webview里的titleNView,参考http://www.html5plus.org/doc/zh_cn/webview.html
tab部分,参考此文实现原生tab:http://ask.dcloud.net.cn/article/12602

原生UI的特点

\n

为解决上述问题,HTML5+提供了原生ui,分别在
1. plus.nativeUI规范。
plus.nativeUI对原生的常用弹出型UI控件做了封装,包括警告框、确认框、弹出输入框、弹出底部菜单、等待框、可自动消失的提示条等。参考:http://www.html5plus.org/#specification#/specification/nativeUI.html
2. plus.nativeobj规范。
与nativeUI不同plus.nativeobj提供的是底层的绘图和写字功能, 参考:http://html5plus.org/doc/zh_cn/nativeobj.html
http://ask.dcloud.net.cn/article/665
(抱歉在nativeUI的名称上没有强调弹出式的特征,导致开发者可能误以为所有原生ui控件都在nativeUI下,其实nativeUI只负责弹出式控件)

原生UI的特点有:
1. 绝对置顶,不担心被其他原生控件遮挡
2. 可以跨webview显示
3. 全屏遮罩,保证手机屏幕其他部分处于蒙灰状态
4. 原生样式及高性能体验
nativeUI的特点是,调用OS的UI控件,确保和本机体验一致。
在iOS6、iOS7+、Android2.3、Android4.x、Android5上,OS是不同的设计风格,但nativeUI的弹出框和当前OS风格一致。

nativeUI的局限性

\n

相比div+css,plus.nativeUI也有一个缺点就是可定制性差。
开发者无法使用css修饰这些弹出控件的样式,它们长的、且只能长得和本机OS的风格一样。
所以在需要个性化设计控件且不在意绝对置顶、跨webview、全屏遮罩这些问题时,也可以使用div+css方式制作弹出控件。
plus.nativeobj的view由于可以自己贴图写字,定制性强,但使用略复杂。

利用plus.nativeobj的view来扩展原生控件的UI

\n

5+引擎提供了原生的扫描、地图控件,想修改这些控件的UI,则需使用nativeObj.view。
这个不是指弹出一个原生框盖住地图那么简单。是可以侵入控件的UI的。
比如在plus.map的原生地图控件上,要绘制一些map控件无法支持的内容,则可以使用nview来处理。
比如在扫码控件上,可以使用nview在摄像头区域中画图标、写字。
也可以把摄像头区域扩大至全屏大,上面的按钮都使用nview绘制。

mui框架的封装

\n

与nativeUI不同,mui同时也补充封装了一些div方式的弹出控件。
包括div方式的alert、confirm、actionSheet、popover...,可以在nativeUI遇到限制时使用。
另外如果要同时多端发布到非5+环境下比如微信公众号里时,则使用mui.alert会自动判断切换,在5+环境下调用plus.nativeUI.alert,在非5+环境下则使用div模式。


10 分享 关注
袋熊18号 浮生若梦 DIOGO 快乐鱼 大鱼泡泡 honker johnson_liu 你猜我猜不猜 DCloud_客服_Trust 1931130013@qq.com
工藤驼一

工藤驼一 回复 DCloud_heavensoft

现在新出的uni-app地图功能太少,想开一个控件,请问你那里有实例吗?
0 赞 2018-09-19 21:39
DCloud_heavensoft

DCloud_heavensoft 回复 L_Me

http://ask.dcloud.net.cn/question/46100。再有问题单独开贴
0 赞 2018-05-23 14:46
L_Me

L_Me 回复 DCloud_heavensoft

barcode怎么做呢?我barcode没法摄像头全屏,上下都有部分是黑的
0 赞 2018-05-23 14:13
DCloud_heavensoft

DCloud_heavensoft 回复 L_Me

camera无法全屏,barcode可以全屏
0 赞 2018-05-23 13:12
L_Me

L_Me

想请问下,摄像头区域扩大至全屏大怎么做啊
0 赞 2018-05-23 11:51
追梦随想

追梦随想

关注
0 赞 2018-02-20 12:06
823660651@qq.com

823660651@qq.com 回复 DCloud_heavensoft

你这是秒回啊。。。好吧,我试了下dom设置高度确实限定了map大小
1 赞 2017-10-14 17:57
DCloud_heavensoft

DCloud_heavensoft 回复 823660651@qq.com

如果你用原生地图控件的话,就是Plus.map,它的层级就是高于网页的,和flash类似。如果你不用原生地图,用网页地图,和原来一样。原生地图不是全屏,大小是开发者自己定的。nview不和map关联,nview和Webview关联,只是位置可以盖住原生地图。
0 赞 2017-10-14 17:41
823660651@qq.com

823660651@qq.com

我就问地图怎么改?map出来就绝对置顶还全屏,nativeobj的view又怎么和它关联。一个绝对置顶的原生地图弄出来有什么意思,这不是糊弄人吗!
0 赞 2017-10-14 17:34
DCloud_heavensoft

DCloud_heavensoft 回复 qq421065846

文中写了,利用plus.nativeobj的view
0 赞 2017-09-23 15:32
qq421065846

qq421065846

我希望的是能在地图上放一些div,你这个绝对置顶了我怎么弄呢?求教?
0 赞 2017-09-23 11:00
DCloud_heavensoft

DCloud_heavensoft 回复 yuanshuang

HTML5版本可以改,参考 http://dcloud.io/hellomui/examples/dialog.html 。plus的nativeUI版本不可以改样式
0 赞 2015-12-11 05:31
yuanshuang

yuanshuang

mui.prompt 的弹出输入框可修修改样式吗? 急急急急急急!!!!!
0 赞 2015-12-10 17:08

要回复文章请先登录注册