開發移動webAPP中html5八大特性的妙用

下面主要給大家介紹html的html5八大特性的妙用，希望對大家能有所幫助。

webAPP的實現基礎就是html5+js+css3.但是webAPP還是基於浏覽器的微網站開發。

正式如此，我們必須要深入的了解html5的8大特性，這樣才能方便我們在開發和設計APP的時候，更合理的采用原生APP與webAPP的相結合。

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

為什麼說HTML5適合進行移動webAPP開發？

第一特性：離線緩存

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

Web Storage是HTML5引入的一個非常重要的功能，可以在客戶端本地存儲數據，類似HTML4的cookie，但可實現功能要比cookie強大的多，cookie大小被限制在4KB，Web Storage官方建議為每個網站5MB。

Web Storage又分為兩種：sessionStorage和localStorage

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

不管是sessionStorage，還是localStorage，可使用的API都相同，常用的有如下幾個(以localStorage為例)：

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

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

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

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

5、得到某個索引的key：localStorage.key(index);

移動APP設計師要知道，什麼時候讓用戶下載離線緩存(注意在線和離線app的區別)。

具體詳細關於webAPP本地存儲的案例教程地址：

http://blog.csdn.net/hbcui1984/article/details/8466743

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

原生開發方式對於文字和音視頻混排的多媒體內容處理相對麻煩，需要拆分開文字、圖片、音頻、視頻，解析對應的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實現起來是非常方便的，而如用原生開發，估計讓那些客戶端開發人員為難啦。

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

具體的詳細案例，有興趣的小伙伴們可以前往這裡查看具體的教程和案例。

希望以上關於html5八大特性的妙用對大家有所幫助。