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

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

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

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

4、，它可構(gòu)建網(wǎng)頁端的audio、video多媒體功能體系，優(yōu)化設(shè)備訪問技術(shù)內(nèi)容,兼容多種web類型優(yōu)化系統(tǒng)設(shè)備功能內(nèi)容，例如對其媒體攝錄能力的強(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)用程序體系。目前比較常見的android以及ios兩大平臺都會采用到這一技術(shù)，例如ios系統(tǒng)中所使用的objective-c語言在開發(fā)過程中就采用到了這一技術(shù)，它的用戶體驗(yàn)良好，用戶群體優(yōu)勢較大。而android系統(tǒng)中則采用到了java語言，它的app設(shè)計(jì)也是開放性的，并不過多限制注冊用戶

5、，擁有著相當(dāng)龐大的用戶群體。就目前來看，比較常見的web app移動產(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)美觀且擁有良好的用戶體驗(yàn)。但整體看來它的開發(fā)成本相對偏高，但不受到平臺限制，能夠?yàn)橛脩魩硐鄬π路f的用戶體驗(yàn)，優(yōu)劣勢并存且同樣較大。目前，為了凸顯互聯(lián)網(wǎng)交互技術(shù)優(yōu)勢，web app已經(jīng)與native app實(shí)現(xiàn)了相互聯(lián)動，它彰顯了跨平臺開發(fā)技術(shù)優(yōu)勢。舉個(gè)例子，微軟公司與zeptolab合作推出的基于html5框架的游戲cut the rope就運(yùn)用到了ie9+

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

7、端兩大部分，逐一進(jìn)行分析。前端部分的總體架構(gòu)相對簡單，它其中的ui界面簡潔，專門記錄前端數(shù)據(jù)內(nèi)容，且ui界面能夠與用戶實(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)對前端數(shù)據(jù)的有效處理，并隨時(shí)封裝數(shù)據(jù)內(nèi)容。再者，它直接與服務(wù)器端相連，可根據(jù)用戶提出相應(yīng)操作需求，存儲緩存數(shù)據(jù)內(nèi)容，為用戶操作封裝http技術(shù)內(nèi)容，最終合理化調(diào)用服務(wù)器端接口。整個(gè)過程中所有數(shù)據(jù)處理都以xml形式展開，可利用解析處理結(jié)果對數(shù)據(jù)緩存內(nèi)容進(jìn)行更新

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

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