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

標籤：優勢   app設計   網路   round   載入   line   地理   ssi   地圖   

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為例）：

1、儲存資料：localStorage.setItem(key,value);

2、讀取資料：localStorage.getItem(key);

3、刪除單個資料：localStorage.removeItem(key);

4、刪除全部資料：localStorage.clear();

5、得到某個索引的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）

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