提高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控件，确保和本机体验一致。
在iOS六、iOS7+、Android2.三、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之间的窗体通信并返回结果。