H5技術(shù)在移動客戶端中的應(yīng)用

闞鈿玉 廣東南方職業(yè)學(xué)院信息與計算機學(xué)院

一、移動客戶端WEB開發(fā)概述

當(dāng)前應(yīng)用于移動客戶端的WEB開發(fā)方式主要有三種，分別為H5開發(fā)技術(shù)、原生開發(fā)方式以及混合型的開發(fā)方式。目前主流的開發(fā)技術(shù)為Native開發(fā)技術(shù)，因為作為原生開發(fā)技術(shù)的Native開發(fā)方式已經(jīng)較為成熟。企業(yè)為了避免研發(fā)風(fēng)險，大多都會采用這種開發(fā)方式來進行移動端的開發(fā)。但是其弊端在于需要投入大量的人力物力。例如在Android平臺上進行Web App的研發(fā)時，需要調(diào)用多個研發(fā)團隊來進行合作開發(fā)。因為涉及到Android平臺的問題，便需要Android開發(fā)團隊與其合作研發(fā)，相應(yīng)的如果把平臺改換為iOS，則需要調(diào)用iOS的開發(fā)團隊來幫助研發(fā)。而企業(yè)在研發(fā)一個Web應(yīng)用時，需要考慮到用戶使用的不同平臺，如果放棄任何一個平臺，則代表放棄了使用此平臺的大量客戶。因此企業(yè)一旦決定啟動某個項目的開發(fā)，則必須同時開發(fā)兩個平臺版本的Web App，這就需要多個團隊相互合作來完成應(yīng)用的研發(fā)，但這極大的浪費了人力資源。而目前已經(jīng)出現(xiàn)的混合技術(shù)開發(fā)模式，則為企業(yè)的技術(shù)研發(fā)提供了新的思路。比如國外公司在開發(fā)Web過程中就相應(yīng)的引入SDK的技術(shù)，這項技術(shù)可以使JS和H5技術(shù)進行聯(lián)合開發(fā)。目前很多的應(yīng)用開發(fā)場景都會應(yīng)用到混合開發(fā)形式，這種模式將三者的技術(shù)優(yōu)勢融合起來，所搭建的應(yīng)用結(jié)構(gòu)具有很強的綜合性能。但是三者也都有其各自的特點。H5開發(fā)技術(shù)其長處在于網(wǎng)頁的研發(fā)，在應(yīng)用過程中，它也主要負責(zé)網(wǎng)頁語言研發(fā)部分。原生開發(fā)技術(shù)對于開發(fā)原生語言部分，具有很強的優(yōu)勢，它能夠提供給用戶更好的使用體驗?？偟膩碚f，不同的項目開發(fā)場景，需要用到不同的開發(fā)技術(shù)模式，因此這里很難說哪種技術(shù)是最好的，只有最適合的才是最好的。因此企業(yè)在開發(fā)應(yīng)用的過程中，應(yīng)該深思熟慮，找到最適合項目的開發(fā)手段，才能獲得高效、經(jīng)濟的開發(fā)方案。

二、H5技術(shù)在移動客戶端的應(yīng)用分析

1. H5在移動客戶端開發(fā)中升級的cookie技術(shù)

為了更加方便快速的進行應(yīng)用開發(fā)設(shè)計，首先就要對H5的優(yōu)勢進行一個深入的了解和探究。首先說H5的WEB API技術(shù)，它的API技術(shù)其實可以看成是Cookie的升級版本。但是H5的cookie存儲數(shù)據(jù)量將不會受到限，因此能夠通過更進一步的方式來把數(shù)據(jù)寫進本地瀏覽器的ROM，當(dāng)瀏覽器被關(guān)閉后，數(shù)據(jù)仍然會被保留下來，這樣在之后打開瀏覽器時，數(shù)據(jù)便能夠恢復(fù)，無需進行重復(fù)網(wǎng)絡(luò)請求，這樣就可以減少流量的使用。在H5技術(shù)中，引入WEB Storage這個功能。它是H5中非常重要的一個功能組成，它能夠使得瀏覽器在本地存儲瀏覽網(wǎng)頁所需要的緩存，這相當(dāng)于以前H4技術(shù)里面的cookie的作用，H5的Storage要比舊版本H4中cookie 的作用更加具有優(yōu)勢。因為H4 里面的cookie的存儲容量，最大支持為4K。但是如果使用H5技術(shù)的話，那么本地的存儲容量基本能夠達到在5M，這就很大程度上加大了存儲數(shù)據(jù)的能力。

2. 繪圖功能的增強

在以往的Web功能中，是沒有繪圖功能的。一方面是由于PC端對網(wǎng)頁繪圖并不是特別的需要，另一方面則是研究開發(fā)的技術(shù)壁壘所造成的。但是對于移動端來說，繪圖功能是非常必須的，這是移動端的特點所決定的。另一方面通過增強繪圖功能，可以使得網(wǎng)頁圖標(biāo)美化，讓用戶可以擁有更好的瀏覽體驗。因此對于目前的移動端Web開發(fā)而言，繪圖功能是必要的。在H5開發(fā)技術(shù)中，便提供了圖片操作的相關(guān)技術(shù)支持。Canvas的API是H5中用來支持在Web中進行圖片方面操作的。它的主要功能包括旋轉(zhuǎn)、移動以及圖片縮放等一些比較常規(guī)的功能，但同時也加入了對于3D方面的技術(shù)支持。

3. GPS定位功能的應(yīng)用

在移動客戶端中定位功能是必不可少的。例如，某些電商為用戶提供的線下門店的消費導(dǎo)航技術(shù)。在其客戶端應(yīng)用中，H5技術(shù)可以根據(jù)消費者的位置來提供周邊的門店，讓消費者更好的進行線下門店自提等互動行為。并且可以為原始靜態(tài)的網(wǎng)頁增加一些動態(tài)效果，來提升網(wǎng)頁與消費者之間的互動能力，這種功能就體現(xiàn)了在H5 中多種移動、變形等動畫效果組件的應(yīng)用。這種交互式的應(yīng)用開發(fā)也可以有效降低移動客戶端的研發(fā)成本。目前來說，市面上比較流行的采用了H5技術(shù)的移動客戶端包括：當(dāng)當(dāng)購物、淘寶、唯品會、京東購物、寶貝租車等。

4.維護成本的降低以及交互性的提升

在原本的網(wǎng)頁設(shè)計里，幾乎都是靜態(tài)的網(wǎng)頁效果，很少有動態(tài)成分的加入，因此其互動性就大大降低了，用戶也只能通過靜態(tài)的網(wǎng)頁來獲取信息。但在H5技術(shù)中，由于加入很多變形、移動及動畫效果的組件，讓H5設(shè)計出來的Web具備了更強的動態(tài)顯示效果，因此也提升了網(wǎng)頁的交互能力，這同時也滿足了當(dāng)前用戶對于交互式體驗的需求。在研發(fā)成本以及維護升級方面，如果使用的是原生開發(fā)技術(shù)來開發(fā)移動客戶端，那么其維護成本是非常高的，主要原因在于原生開發(fā)技術(shù)的平臺相關(guān)性非常低，且代碼不通用，一個平臺的代碼很難移植到其它平臺中去。因此不同的平臺的維護工作就需要不同的團隊來進行，維護成本也就水漲船高了。但是對于H5開發(fā)的應(yīng)用來說，就不存在以上問題。由于H5的兼容性以及跨平臺的優(yōu)勢，在升級維護過程中，不需要安裝一系列升級包，也不需要多個團隊對多個平臺的分別維護。所以這就大大降低了研發(fā)成本，也減少了應(yīng)用維護帶來的各種問題。

5. H5在移動端應(yīng)用的不足

在瀏覽體驗的過程中，如果流量比較慢，那么就會帶來比較差的用戶體驗，網(wǎng)頁加載慢，信息殘缺等一系列的問題。還有就是性能差異，與原生開發(fā)相比，H5的性能要差很多，這主要是因為原生開發(fā)技術(shù)已經(jīng)非常成熟，與系統(tǒng)的貼合效果很好，所遇到的BUG也被很多之前的開發(fā)人員一一補足。但H5的應(yīng)用時間還比較短，這就需要技術(shù)人員花費時間去做相應(yīng)的努力。

三、總結(jié)

目前總的來說，隨著H5技術(shù)的不斷改進和發(fā)展，它已經(jīng)完全有能力做相應(yīng)的移動客戶端應(yīng)用的研發(fā)。它強大的兼容性以及良好的跨平臺能力，對于許多企業(yè)來說是非常重要的。尤其是對于一些小型企業(yè)，使用H5技術(shù)不僅可以節(jié)約成本，也能夠快速實現(xiàn)。未來H5技術(shù)會不斷地改善，它將會應(yīng)用到更多的平臺之中。但是H5技術(shù)也還是有著它的不足之處，比如隨著功能的不斷增加，使用人群的不斷龐大，其運行性能問題就會變得嚴(yán)重。因此企業(yè)在選擇相應(yīng)開發(fā)技術(shù)的時候，應(yīng)該從自身實際出發(fā)，根據(jù)確切需求來進行選擇，合理搭配其它開發(fā)方式，找到一個最優(yōu)的設(shè)計方案。