提高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之間的窗體通信並返回結果。