提升HTML5的性能体验系列之四 使用原生UI
原生UI的设计目的
HTML和css有一个优势就是灵活的样式设计。
在大多数情况下,我们都应该使用HTML+css来负责UI。但是有些情况下,我们发现HTML+css的UI不满足需求。
1. 绝对置顶
HTML的video等元素,以及5+的map等原生元素,这些原生控件的层级高于div。
对于一些弹出的需要置顶的控件,会造成div模式的控件无法绝对置顶,就像在web开发里弹出的div被flash遮住一样。
使用div方式开发的如下弹出控件:alert、confirm、actionSheet、waiting、date、time、prompt、toast,都存在这个问题。
为此,HTML5+扩展了上述native级别的UI控件,保证可以绝对置顶。
2. 跨webview
如果界面使用webview方式的tab选项卡,但想从底部弹出一个菜单actionsheet,此时使用div方式的弹出菜单由于无法跨webview,只能看到一部分。
此时就需要使用nativeUI里的actionsheet才能跨webview。
3. 全屏遮罩
弹出控件时,需要对整个屏幕的其他部分做阴影遮罩。
使用div遮罩,同样无法蒙住video、map等原生控件,也无法跨webview。
而且原生的遮罩还可以蒙住手机顶部状态条,这都是div遮罩做不到的。
HTML5+扩展的nativeUI控件,保证可以全屏遮罩。
原生UI的特点
为解决上述问题,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
原生UI的特点有:
1. 绝对置顶,不担心被其他原生控件遮挡
2. 可以跨webview显示
3. 全屏遮罩,保证手机屏幕其他部分处于蒙灰状态
4. 原生样式及高性能体验
nativeUI的特点是,调用OS的UI控件,确保和本机体验一致。
在iOS6、iOS7+、Android2.3、Android4.x、Android5上,OS是不同的设计风格,但弹出框和当前OS风格一致。
并且原生的控件展示,比div+css的方式执行效率更高。
nativeUI的局限性
相比div+css,plus.nativeUI也有一个缺点就是可定制性差。
开发者无法使用css修饰这些弹出控件的样式,它们长的、且只能长得和本机OS的风格一样。
所以在需要个性化设计控件且不在意绝对置顶、跨webview、全屏遮罩这些问题时,也可以使用div+css方式制作弹出控件。
plus.nativeobj的view由于可以自己贴图写字,定制型比较强,但使用较复杂。这里有对nativeobj的view的描述http://ask.dcloud.net.cn/article/665
mui框架的封装
与nativeUI不同,mui同时也补充封装了一些div方式的弹出控件。
包括div方式的alert、confirm、actionSheet、popover...,可以在nativeUI遇到限制时使用。另外如果要同时多端发布到非5+环境下比如微信公众号里时,则使用mui.alert会自动判断切换,在5+环境下调用plus.nativeUI.alert,在非5+环境下则使用div模式。
弹出半透明的webview,万能但消耗内存
有时我们发现nativeUI弹出的东西没法满足定制需求,而div方式的弹出控件又无法绝对置顶。
除了nativeobj的view外,还有一种办法,就是多消耗点内存,即干脆弹出一个非全屏半透明webview。
webview的WebviewStyle对象中可以设置zindex来置顶,可以设置高宽,可以设置遮罩,可以设置透明度。
在webview里可以随便自定义界面,然后通过webview的evaljs方法做webview之间的窗体通讯并返回结果。
提升HTML5的性能体验系列之四 使用原生UI的更多相关文章
- 提升html5的性能体验系列之四使用原生ui
原生UI即nativeUI的设计目的 HTML和css有一个优势就是灵活的样式设计.在大多数情况下,我们都应该使用HTML+css来负责UI.但是有些情况下,我们发现HTML+css的UI不满足需求. ...
- 提升html5的性能体验系列之一避免切页白屏
窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...
- 提升HTML5的性能体验系列之一 避免切页白屏
窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...
- 提升html5的性能体验系列之三流畅下拉刷新
下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...
- 提升HTML5的性能体验系列之三 流畅下拉刷新和上拉
下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...
- 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
webview加载时有5个事件.触发顺序为loading.titleUpdate.rendering.rendered.loaded.webview开始载入页面时触发loading,载入过程中如果&l ...
- 提升HTML5的性能体验系列之二 列表流畅滑动
App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把lis ...
- 提升html5的性能体验系列之五webview启动速度优化及事件顺序解析]
webview加载时有3个事件.触发顺序为loading.titleUpdate.loaded.webview开始载入页面时触发loading,载入过程中如果title已经解析并赋予新值,则触发tit ...
- 提升html5的性能体验系列之二列表流畅滑动
App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把lis ...
随机推荐
- linux命令清除服务器缓存
linux 服务器开了某项服务或程序后,内存占用的非常大,停止服务或关闭进程后,内存不会立即释放,需要手动释放,使用命令 echo 3 > /proc/sys/vm/drop_chaches 释 ...
- Centos 7 下 Corosync + Pacemaker + psc + HA-proxy 实现业务高可用
一.介绍: 1.本博客Corosync + Pacemaker + psc + HA-proxy 实现业务高可用,以httpd 服务实现高可用为例. 2.架构思路 a.三台web 节点,功能:全部安装 ...
- 静态方法调用内部类时候的new 问题
package tool; /** * 静态方法调用内部类时候的new 问题 */ public class aa { // 静态方法 // 静态方法new 有问题 public static voi ...
- 约束布局 ConstraintLayout
app:layout_constraintVertical_bias="0.5"app:layout_constraintHorizontal_bias="0.5&quo ...
- solo
solo - 必应词典 美['soʊloʊ]英['səʊləʊ] n.[乐]独奏(曲):独唱(曲):单人舞:单独表演 adj.独唱[奏]的:单独的:单人的 v.独奏:放单飞 adv.独 网络梭罗:独奏 ...
- f5通过vs访问其他站点的源、目的IP问题
通过VIP访问其他站点,则事实上是从服务器访问到其他站点. 如,域名 a.xin.com解析到vip 10.16.100.47(member为10.16.45.71和10.16.45.72)访问192 ...
- 总结函数open与fopen的区别
转自:https://www.zybuluo.com/yiltoncent/note/87461 对于这两个名字很类似的函数,对于很多初学者来说,不容易搞清楚它们有什么不同,只知道按照函数用法使用.如 ...
- 鼠标移上去触动hover致使div向上移动几个相素(动画transition轻轻的移动)
- iOS 网络操作与AFNetworking
一.早前的几个网络框架 1.ASI框架: HTTP终结者.很牛, 但是有BUG, 已经停止更新. 2.MKNetworkKit (印度人写的). 3.AFN一直还在更新. AFNetworking的出 ...
- php ActiveMQ的安装与使用
一.ActiveMQ是什么?ActiveMQ是Apache出品,最流行的,能力强劲的开源消息总线.支持多种语言客户端(Java,C,C++,C#,Python,Ruby,Perl,PHP), 支持多种 ...