妙用HTML5的八大特性來開發移動webAPP

webAPP的實現基礎就是html5+js+css3.但是webAPP仍是基於瀏覽器的微站點開發。正是如此，咱們必須要深刻的瞭解html5的特性，這樣才幹方便咱們在開發和設計APP的時候。更合理的採用原生APP與webAPP的相結合。

而APP裏面最重要的一個分享功能，分享出去的必須是網頁形式的。因此。Html5必須學會。

爲何說HTML5適合進行移動webAPP開發？

第一特性：離線緩存

HTML5 Web Storage API可以看作是增強版的cookie。不受數據限制大小，有更好的彈性以及架構，可以將數據寫入到本機的ROM中。還可以在關閉瀏覽器後再次打開時恢復數據，以下降網絡流量。

Web Storage是HTML5引入的一個很重要的功能，可以在client本地存儲數據，相似HTML4的cookie，但可實現功能要比cookie強大的多，cookie大小被限制在4KB，Web Storage官方建議爲每個站點5MB。

Web Storage又分爲兩種：sessionStorage和localStorage

從字面意思就可以很是清楚的看出來，sessionStorage將數據保存在session中。瀏覽器關閉也就沒了。而localStorage則一直將數據保存在client本地。

不管是sessionStorage，仍是localStorage。可以使用的API都一樣，常用的有例如如下幾個（以localStorage爲例）：

一、保存數據：localStorage.setItem(key,value);

二、讀取數據：localStorage.getItem(key);

三、刪除單個數據：localStorage.removeItem(key);

四、刪除所有數據：localStorage.clear();

五、獲得某個索引的key：localStorage.key(index);

移動APP設計師要知道，何時讓用戶下載離線緩存(注意在線和離線app的差異)。

第二特性：音頻視頻自由嵌入，多媒體形式更爲靈活

原生開發方式對於文字和音視頻混排的多媒體內容處理相對麻煩，需要拆分開文字、圖片、音頻、視頻。解析相應的URL並分別用不一樣的方式處理。

HTML5在這個方面全然不受限制。可以全然放在一塊兒進行處理。

移動APP設計師要知道，假設新聞類、微博類、社交類應用的信息呈現中實現文字與多媒體混排。而不用專門嵌入webview。將是一件多美好的事情，至少現在原生方式實現起來還有困難。

第三特性：地理定位

地理位置定位，讓定位和導航再也不專屬導航軟件。地圖也不用下載很大的地圖包，可以經過緩存來解決。到哪兒下哪兒。更靈活。

移動APP設計師要知道，現在嵌入LBS功能的應用愈來愈多。這也是移動設備與臺式PC相比最大的優點之中的一個，HTML5能把這個優點再度擴大化，好好想一想怎麼在你設計的應用裏用上吧!

第四特性：Canvas畫圖。提高移動平臺的畫圖能力

使用Canvas API可以簡單繪製熱點圖收集用戶體驗資料。支持圖片的移動、旋轉、縮放等常規編輯。而且也支持2D和3D。

第五特性：豐富的交互方式

提高互動能力：拖拽、撤銷歷史操做、文本選擇等。比方

Transition – 組件的移動效果

Transform – 組件的變形效果

Animation – 將移動和變形增長動畫支持

加上js的動畫效果等等。HTML5提供的交互方式是很豐富的。

各位移動APP設計師儘量的發揮想象吧！

第六特性：開發及維護成本低

這個相對於原生APP開發來講更低的開發及維護成本; 使頁面變得更小，下降了用戶沒必要要的支出;而且，性能更好使耗電量更低; 方便升級。打開就可使用最新版本號。免去又一次下載升級包的麻煩，使用過程當中就直接更新了離線緩存。

第七特性：CSS3 視覺設計師的輔助利器的支持。

CSS3支持了字體的嵌入、版面的排版。以及最使人印象深入的動畫功能。

Selector – 更有彈性的選擇器

Webfonts – 嵌入式字體

Layout – 多樣化的排版選擇

Stlying radius gradient shadow – 圓角、漸變、陰影

Border background – 邊框的背景支持

使用CSS3來完畢部分視覺工做，加載速度快。節省代碼及圖片，也爲用戶節約了帶寬。

這些效果用HTML5實現起來是很方便的，而如用原生開發，預計讓那些client開發者爲難啦。

第八特性：html5調用手機攝像頭和手機相冊、通信錄等功能

本文做者：二飛 我的項目有：配資（www.ya-jing.cn）