基于HTML5的移動(dòng)WebApp開(kāi)發(fā)及應(yīng)用設(shè)計(jì)

1、 基于html5的移動(dòng)webapp開(kāi)發(fā)及應(yīng)用設(shè)計(jì) 摘要：在當(dāng)前移動(dòng)智能終端網(wǎng)絡(luò)發(fā)展建設(shè)領(lǐng)域，基于網(wǎng)絡(luò)平臺(tái)與瀏覽器的移動(dòng)app開(kāi)發(fā)建設(shè)成本正在日益加劇，為了跟進(jìn)發(fā)展形勢(shì)、滿(mǎn)足更多人的信息化應(yīng)用需求，基于html5的移動(dòng)應(yīng)用web app軟件應(yīng)運(yùn)而生。本文中簡(jiǎn)單分析了html5與移動(dòng)web app的基本特征，并重點(diǎn)分析了基于html5的移動(dòng)web app開(kāi)發(fā)及應(yīng)用設(shè)計(jì)。關(guān)鍵詞：html5；移動(dòng)web app；基本特征；技術(shù)架構(gòu)；開(kāi)發(fā)應(yīng)用設(shè)計(jì)我國(guó)互聯(lián)網(wǎng)發(fā)展是突飛猛進(jìn)的，它為人們的工作、生活與學(xué)習(xí)提供了相當(dāng)有利、廣泛的空間環(huán)境。伴隨我國(guó)網(wǎng)民數(shù)量的持續(xù)增長(zhǎng)（目前已增長(zhǎng)至8.54億），基于html5新技術(shù)

2、的移動(dòng)web app設(shè)計(jì)應(yīng)用就逐漸成為主流。html5希望加速開(kāi)發(fā)移動(dòng)web app,基于它較廣的覆蓋面、簡(jiǎn)單快捷的使用特性來(lái)持續(xù)拓展個(gè)人與商業(yè)用戶(hù)運(yùn)營(yíng)渠道，開(kāi)發(fā)應(yīng)用設(shè)計(jì)出良好的移動(dòng)web app技術(shù)架構(gòu)。1. html5與移動(dòng)web app的基本特征1. html5的基本特征我國(guó)在2014年由萬(wàn)維網(wǎng)聯(lián)盟正式宣布發(fā)布html5標(biāo)準(zhǔn)規(guī)范，該標(biāo)準(zhǔn)規(guī)范能夠?qū)崿F(xiàn)跨平臺(tái)web應(yīng)用，并引進(jìn)新功能內(nèi)容，它能夠?yàn)楫?dāng)前的多媒體、新媒體移動(dòng)設(shè)備帶來(lái)技術(shù)層面的巨大革新。例如說(shuō)html5就專(zhuān)門(mén)提供了全新的語(yǔ)義化標(biāo)簽，該標(biāo)簽?zāi)軌蛑苯釉鰪?qiáng)文檔的易讀性，確保文檔清晰明了化。而且豐富的標(biāo)簽也能賦予網(wǎng)頁(yè)更豐富的意義結(jié)構(gòu)內(nèi)涵，如

3、此網(wǎng)頁(yè)設(shè)計(jì)更有其實(shí)用性?xún)r(jià)值，功能覆蓋面也更廣泛。從離線存儲(chǔ)技術(shù)應(yīng)用角度來(lái)講，它不同于一般web功能必須在線瀏覽，它在離線狀態(tài)下也能支持?jǐn)?shù)據(jù)傳輸與存儲(chǔ)，甚至可完成數(shù)據(jù)交換業(yè)務(wù)，確保程序運(yùn)行進(jìn)一步優(yōu)化。目前的html5技術(shù)應(yīng)用主要涉及實(shí)現(xiàn)了3方面功能：第一是離線資源緩存技術(shù)、第二是在線狀態(tài)檢測(cè)技術(shù)、第三是本地?cái)?shù)據(jù)存儲(chǔ)技術(shù)。在3d/圖形和特效技術(shù)表現(xiàn)方面，可利用html5進(jìn)行3d圖形高效渲染，確保頁(yè)面效果更加炫酷多彩。這里同時(shí)啟用了canvas功能，主要用于網(wǎng)頁(yè)繪制位圖技術(shù)，它也支持各種2d圖形繪圖，更能創(chuàng)建3d圖像設(shè)計(jì)方案，追求對(duì)多媒體能力的有效豐富。在該過(guò)程中，主要利用音頻視頻能力強(qiáng)化html5

4、，它可構(gòu)建網(wǎng)頁(yè)端的audio、video多媒體功能體系，優(yōu)化設(shè)備訪問(wèn)技術(shù)內(nèi)容,兼容多種web類(lèi)型優(yōu)化系統(tǒng)設(shè)備功能內(nèi)容，例如對(duì)其媒體攝錄能力的強(qiáng)化等等。2. web app的基本特征web app主要基于web系統(tǒng)進(jìn)行設(shè)計(jì)應(yīng)用，它其中更利用到了web瀏覽器技術(shù)，能夠完全跨越互聯(lián)網(wǎng)、內(nèi)聯(lián)網(wǎng)建立一套多任務(wù)、多功能應(yīng)用程序體系。目前比較常見(jiàn)的android以及ios兩大平臺(tái)都會(huì)采用到這一技術(shù)，例如ios系統(tǒng)中所使用的objective-c語(yǔ)言在開(kāi)發(fā)過(guò)程中就采用到了這一技術(shù)，它的用戶(hù)體驗(yàn)良好，用戶(hù)群體優(yōu)勢(shì)較大。而android系統(tǒng)中則采用到了java語(yǔ)言，它的app設(shè)計(jì)也是開(kāi)放性的，并不過(guò)多限制注冊(cè)用戶(hù)

5、，擁有著相當(dāng)龐大的用戶(hù)群體。就目前來(lái)看，比較常見(jiàn)的web app移動(dòng)產(chǎn)品主要包含了3種：web app、native app以及native app,這其中native app表現(xiàn)性能最優(yōu)，因?yàn)樗{(diào)用了系統(tǒng)中自帶的api技術(shù)內(nèi)容，界面相當(dāng)美觀且擁有良好的用戶(hù)體驗(yàn)。但整體看來(lái)它的開(kāi)發(fā)成本相對(duì)偏高，但不受到平臺(tái)限制，能夠?yàn)橛脩?hù)帶來(lái)相對(duì)新穎的用戶(hù)體驗(yàn)，優(yōu)劣勢(shì)并存且同樣較大。目前，為了凸顯互聯(lián)網(wǎng)交互技術(shù)優(yōu)勢(shì)，web app已經(jīng)與native app實(shí)現(xiàn)了相互聯(lián)動(dòng)，它彰顯了跨平臺(tái)開(kāi)發(fā)技術(shù)優(yōu)勢(shì)。舉個(gè)例子，微軟公司與zeptolab合作推出的基于html5框架的游戲cut the rope就運(yùn)用到了ie9+

6、html5綜合技術(shù)應(yīng)用模式。這一做法為我國(guó)it領(lǐng)域所學(xué)習(xí)，希望將html5作為未來(lái)游戲平臺(tái)制作發(fā)展的重要技術(shù)標(biāo)準(zhǔn)，取代傳統(tǒng)native app技術(shù)內(nèi)容，實(shí)現(xiàn)進(jìn)一步的技術(shù)突破1。2. 基于html5的移動(dòng)web app設(shè)計(jì)應(yīng)用利用html5中豐富的技術(shù)組合內(nèi)容如java、css3等等可實(shí)現(xiàn)對(duì)傳統(tǒng)網(wǎng)頁(yè)技術(shù)架構(gòu)的有效改變，同時(shí)對(duì)頁(yè)面組織形式進(jìn)行優(yōu)化。為此，需要首先明確基于html5技術(shù)背景下移動(dòng)web app的設(shè)計(jì)技術(shù)架構(gòu)，再考慮分析web app中所能實(shí)現(xiàn)的關(guān)鍵技術(shù)內(nèi)容。1. 基于html5的移動(dòng)web app設(shè)計(jì)技術(shù)架構(gòu)首先，要基于html5建立web app的b/s架構(gòu)，并將架構(gòu)劃分為前端與后

7、端兩大部分，逐一進(jìn)行分析。前端部分的總體架構(gòu)相對(duì)簡(jiǎn)單，它其中的ui界面簡(jiǎn)潔，專(zhuān)門(mén)記錄前端數(shù)據(jù)內(nèi)容，且ui界面能夠與用戶(hù)實(shí)現(xiàn)交互，共同架構(gòu)web app技術(shù)架構(gòu)如圖12。圖1基于html5的web app技術(shù)架構(gòu)如圖1，基于html5的web app技術(shù)架構(gòu)中采用到了多種先進(jìn)技術(shù)內(nèi)容，其中前端數(shù)據(jù)層與ui界面、后端建立了相互關(guān)聯(lián)關(guān)系，它可實(shí)現(xiàn)對(duì)前端數(shù)據(jù)的有效處理，并隨時(shí)封裝數(shù)據(jù)內(nèi)容。再者，它直接與服務(wù)器端相連，可根據(jù)用戶(hù)提出相應(yīng)操作需求，存儲(chǔ)緩存數(shù)據(jù)內(nèi)容，為用戶(hù)操作封裝http技術(shù)內(nèi)容，最終合理化調(diào)用服務(wù)器端接口。整個(gè)過(guò)程中所有數(shù)據(jù)處理都以xml形式展開(kāi)，可利用解析處理結(jié)果對(duì)數(shù)據(jù)緩存內(nèi)容進(jìn)行更新

8、。在后端部分則通過(guò)數(shù)據(jù)結(jié)果處理來(lái)分析優(yōu)化前端數(shù)據(jù)層，形成數(shù)據(jù)分析技術(shù)應(yīng)用前后呼應(yīng)。后端數(shù)據(jù)庫(kù)主要用于大數(shù)據(jù)存儲(chǔ)，確保數(shù)據(jù)能夠始終在前端操作過(guò)程中應(yīng)用到位，隨時(shí)隨地轉(zhuǎn)化生成最新數(shù)據(jù)內(nèi)容。后端部分所采用的是典型的分層設(shè)計(jì)，它基于接口傳遞數(shù)據(jù)，且它的層次間影響度最小。2. 基于html5的移動(dòng)web app設(shè)計(jì)關(guān)鍵技術(shù)基于html5構(gòu)建移動(dòng)web app可協(xié)助構(gòu)建后端部分技術(shù)體系，例如建立asp.net、sql server等等，保證前端框架與相關(guān)協(xié)議順利對(duì)接。就以前端部分的css層疊樣式表技術(shù)應(yīng)用為例，它的界面采用到了經(jīng)典的結(jié)構(gòu)表現(xiàn)分離形式，新技術(shù)則主要應(yīng)用于css和html領(lǐng)域中。實(shí)際上，基于h

9、tml5所構(gòu)建的新語(yǔ)義化標(biāo)簽已經(jīng)相當(dāng)?shù)轿?，它一方面能提升網(wǎng)頁(yè)語(yǔ)義與質(zhì)量，一方面也能確保搜索引擎優(yōu)化效果始終保持良好。例如在移動(dòng)web app設(shè)計(jì)關(guān)鍵技術(shù)應(yīng)用方面就采用到了java script技術(shù)，它能夠配合html5添加網(wǎng)頁(yè)動(dòng)態(tài)功能，這也是目前移動(dòng)智能終端領(lǐng)域中的核心技術(shù)內(nèi)容。例如要在java script庫(kù)中配置一個(gè)輕量級(jí)的jquery，為用戶(hù)合理處理數(shù)據(jù)內(nèi)容、html元素事件以及ajax封裝內(nèi)容創(chuàng)造條件3?？偨Y(jié)：目前的html5技術(shù)體系已經(jīng)逐漸成熟，它在移動(dòng)web app開(kāi)發(fā)設(shè)計(jì)應(yīng)用中起到了舉足輕重的重要，真正做到了跨瀏覽器、跨平臺(tái)技術(shù)操作，為用戶(hù)帶來(lái)了相對(duì)便捷、高效率的多媒體平臺(tái)體驗(yàn)。參考文獻(xiàn)：1黃鶯.基于mui的跨平臺(tái)移動(dòng)app開(kāi)發(fā)研究 以網(wǎng)頁(yè)設(shè)計(jì)app為例j.職業(yè),2020(2