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

一、移動(dòng)客戶(hù)端WEB開(kāi)發(fā)概述

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

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

1. H5在移動(dòng)客戶(hù)端開(kāi)發(fā)中升級(jí)的cookie技術(shù)

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

2. 繪圖功能的增強(qiáng)

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

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

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

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

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

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

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

三、總結(jié)

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