zoukankan      html  css  js  c++  java
  • 提升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之间的窗体通讯并返回结果。

  • 相关阅读:
    laravel migrate 指定执行部分 migration
    Laravel attribute casting 导致的 Indirect modification of overloaded property
    python中列表,元组的乘法
    python中简化的验证码功能
    Day4作业:蛋疼CRM系统
    python中pop(),popitem()的整理
    新手pyhoner的指定内容读取和写入的思路
    Python基础之文件操作
    Python基础之内置函数(一)
    Python基础之set集合与函数
  • 原文地址:https://www.cnblogs.com/zhangchuangye/p/6809456.html
Copyright © 2011-2022 走看看