基于HTML5 web 技術(shù)APP快速開發(fā)研究

李世滿

摘要：隨著互聯(lián)網(wǎng)+時代的到來，智能手機(jī)、PDA等移動設(shè)備的廣泛運(yùn)用，作為企業(yè)與個人便捷移動工作與生活的橋梁之一，APP的運(yùn)用與開發(fā)已被提上開發(fā)人員的記事日程。該文以移動辦公APP”云端”軟件開發(fā)為藍(lán)本，闡述了基于HTML5web技術(shù)快速開發(fā)APP的優(yōu)勢及HTML5web技術(shù)的發(fā)展前景，為基于HTML5web技術(shù)APP快速開發(fā)研究做一些實(shí)踐經(jīng)驗(yàn)積累與案例提供。

關(guān)鍵詞：HTML5 web技術(shù) APP開發(fā) HTML5發(fā)展

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2016）03-0081-02

隨著智能手機(jī)的普及，互聯(lián)網(wǎng)+時代的到來， 3G和4G網(wǎng)絡(luò)的大規(guī)模覆蓋應(yīng)用，移動互聯(lián)網(wǎng)得以迅猛發(fā)展。互聯(lián)網(wǎng)的發(fā)展處于一個轉(zhuǎn)折點(diǎn)，而在這之中，移動手機(jī)應(yīng)用作為主角，對于網(wǎng)絡(luò)供應(yīng)商、用戶、開發(fā)商、投資商都有著重大的影響。 App作為沒有時間和地點(diǎn)的限制，并且可以隨時隨地地查看和使用的這種方式已逐漸成為用戶的最愛。并且APP軟件因?yàn)樗兄采w面廣而且簡便和快捷等這些優(yōu)勢也越來越受到企業(yè)的關(guān)注。如何快速并有效的實(shí)現(xiàn)APP的開發(fā)問題的解決被提上開發(fā)人員的記事日程。

1 APP與Web app的發(fā)展

App也就是應(yīng)用軟件的意思，英文簡稱Application，如今的APP多指智能手機(jī)的第三方應(yīng)用程序。

據(jù)APP行業(yè)管理中心的數(shù)據(jù)顯示，高達(dá)79%的用戶每天早上已起來就開始了手機(jī)應(yīng)用。手機(jī)的應(yīng)用幾乎成為了人們生活中的一大日常必需品。人們在手機(jī)的APP中獲取資訊、進(jìn)行娛樂和網(wǎng)上購物。隨著移動設(shè)備的快速崛起，APP也正在爆發(fā)式增長。移動客戶端中蘊(yùn)藏著巨大的商機(jī)已毋庸置疑。

在App大力發(fā)展的今天，人們已不再質(zhì)疑App可以帶來的收益，互聯(lián)網(wǎng)+時代的到來，App 讓每個人的生活更輕松、更便捷了，APP開發(fā)也隨之讓每個企業(yè)都開啟了移動信息化的進(jìn)程。

Web app 實(shí)際上就是 Web Application，指利用 Web 技術(shù)，配合 Web 瀏覽器，跨越網(wǎng)絡(luò)實(shí)現(xiàn)一個或多個任務(wù)的 Web 應(yīng)用程序。通過 Web 瀏覽器，由Web 技術(shù)實(shí)現(xiàn)出來的 Web App 有別于傳統(tǒng)的網(wǎng)站，它具有更豐富的交互體驗(yàn)，使得 Web App 看上去更像是 Native App，而且web app的開發(fā)難度較之native app大幅降低，易用性更高。

2012年我們看到了WEB APP的雛形， 2013到2014年WEB APP進(jìn)入井噴期。原因在于首先HTML5技術(shù)本身已經(jīng)比較成熟。其次整個產(chǎn)業(yè)鏈對HTML5的接受程度已經(jīng)得到了推廣和普及，標(biāo)準(zhǔn)已經(jīng)形成。各種各樣的瀏覽器都是爭先恐后的來支持HTML5。從另外一個角度隨著帶寬的不斷上升，資費(fèi)的不斷下降，人們對WEB APP接受程度也會越來越高。最重要的是云計算的推出，云計算根本上改變了WEB APP的接受程度。

2 基于HTML5web技術(shù)APP快速開發(fā)現(xiàn)狀

相對于Native App，Web App開發(fā)有哪些優(yōu)勢呢？首先，app開發(fā)成本較低。只要使用web開發(fā)技術(shù)就可以輕松地完成web app開發(fā)；其次，app升級較簡單。升級不需要通知用戶，在服務(wù)端更新文件即可，用戶完全沒有感覺；另外，和一般的web一樣，維護(hù)比較簡單，它其實(shí)就是一個站點(diǎn)。

很多app開發(fā)公司看中web的未來發(fā)展是基于它的靈活性——既擁有在web上完成任務(wù)的一切優(yōu)點(diǎn)，又能在離線的時候完成這些任務(wù)。支持離線應(yīng)用現(xiàn)在已經(jīng)是可以實(shí)現(xiàn)的了——HTML5提供了例如應(yīng)用緩存和客戶端存儲（比如，本地存儲，索引數(shù)據(jù)庫）等性能，這樣你的應(yīng)用就能在沒有網(wǎng)絡(luò)聯(lián)接的時候也可以工作了隨著科技的發(fā)展，移動終端已進(jìn)入人們的生活，而傳統(tǒng)的網(wǎng)頁開發(fā)技術(shù)很難適應(yīng)這種小屏幕界面，HTML5的問世在很大程度上解決了這一難題。結(jié)合 HTML5的特性并提出了簡單明了、可訂制性、以用戶為中心的移動Web設(shè)計原則。HTML5新增的視頻、音頻、畫布、離線應(yīng)用等功能為網(wǎng)頁開發(fā)帶來了新的希望和曙光。新技術(shù)不僅能很好地適應(yīng)移動終端界面，而且很大程度上減少了代碼冗余，提高了設(shè)備運(yùn)行效率。

用Html5+css3開發(fā)webapp的優(yōu)勢在于：1）跨平臺語義化更好、性能更優(yōu)Android/iOS/windowsphone都對html5和css3提供了良好的支持；2）引入漸變、圓角、陰影、半透明等新特性，為用戶創(chuàng)建更輕量的頁面和更豐富的體驗(yàn)。帶來更好的網(wǎng)頁的連通性、可搜索性、可操作性等Webview所用到的部分css3屬性介紹box-flex、rgba、border-radius、border-image、ox-shadow、text-shadow、multiplebackgrounds、background-size、gradient樣式呈現(xiàn)使用css3屬性可以生成內(nèi)外陰影，透明度，漸變色，圓角等效果，而以往這些只能用圖片來實(shí)現(xiàn)的。選擇器css3增加了更多的CSS選擇器，讓選擇元素變得越來越簡，實(shí)現(xiàn)更簡單但是更強(qiáng)大的功能。3）學(xué)會利用html5的某些元素實(shí)現(xiàn)跨平臺的效果。如HTML5 Canvas實(shí)現(xiàn)Loading加載動畫。

3 以移動辦公APP軟件開發(fā)為藍(lán)本的HTML5web技術(shù)應(yīng)用：“云端”APP辦公軟件開發(fā)

“云端”應(yīng)用軟件是由深圳技師學(xué)院學(xué)生自主開發(fā)的手機(jī)應(yīng)用軟件，主要應(yīng)用于用戶云端文件保存與分享。 “云端”應(yīng)用軟件的目標(biāo)是“高質(zhì)量的文件社交體驗(yàn)”，根據(jù)這一目標(biāo)和應(yīng)用軟件的使用范圍，讓中國所有的高校學(xué)生和企事業(yè)單位都使用的“云端”的目標(biāo)也就不難實(shí)現(xiàn)?！霸贫恕备鞴δ芡ㄟ^ajax使前后臺數(shù)據(jù)交互。前端使用H5+CSS3+JS編寫，本地端使用java編寫，服務(wù)端使用ajax+PHP+.Net+NodeJS編寫。各端間相互聯(lián)通。具體邏輯判斷如圖所示。

作品功能與原型設(shè)計：

1）用戶云端保存文件：“云端”應(yīng)用軟件主要應(yīng)用于學(xué)生、商務(wù)人群于云端保存文件，其工作原理為：用戶通過網(wǎng)絡(luò)下載軟件并于手機(jī)安裝“云端”，然后在“云端”中注冊帳號，在云盤中點(diǎn)擊上傳文件即可。 2）用戶隨意分享文件：“云端”應(yīng)用軟件在用戶上傳文件后，文件的狀態(tài)是自動公開分享。即用戶需要在上傳文件是考慮文件內(nèi)是否涉及個人隱私與包含違法反動文件。一旦用戶分享以上所述文件，上傳者將被追究法律責(zé)任。3）用戶間在線交流：“云端”應(yīng)用軟件用戶間可相互添加好友創(chuàng)建群聊天實(shí)現(xiàn)即使在線交流。4）云端基礎(chǔ)功能： 用戶可在應(yīng)用軟件上查看網(wǎng)盤文件、編輯云文檔、瀏覽云相冊、欣賞云音樂、并且實(shí)現(xiàn)軟件的基礎(chǔ)設(shè)置。

作品實(shí)現(xiàn)、難點(diǎn)及特色分析：

軟件實(shí)現(xiàn)：軟件使用html5+css3+JavaScript+java+ajax+PHP+.Net+NodeJS等語言實(shí)現(xiàn)。

軟件難點(diǎn)：web與本機(jī)關(guān)聯(lián)相互調(diào)用；云端文件數(shù)據(jù)庫取數(shù)；文件目錄結(jié)構(gòu)分析；用戶信息保存與設(shè)置；用戶即使在線交流；各類文件查看

軟件特色：用戶可隨時分享文件、對文件評論、獲取優(yōu)質(zhì)文件；本軟件使用的是混合應(yīng)用技術(shù)，即使用web+java+ajax完成?；旌闲蚢pp可以完美的解決各平臺中的兼容性；開發(fā)成本低，混合型應(yīng)用可同步各操作平臺的用戶交互，不需在各平臺開發(fā)不同的用戶使用界面；維護(hù)更新簡單，混合型應(yīng)用可讓開發(fā)者及時的修改bug更新軟件并發(fā)布。.

軟件訪問地址：http：www.1473.cn

4 HTML5發(fā)展趨勢

HTML 5從根本上改變了開發(fā)商開發(fā)Web應(yīng)用的方式，從桌面瀏覽器到移動應(yīng)用，這種語言和標(biāo)準(zhǔn)都正在影響并將繼續(xù)影響著各種操作平臺。

參考文獻(xiàn)：

[1] 物聯(lián)中國網(wǎng)[EB/OL].www.50cnnet.com.

[2] 王慶.基于HTML5的移動Web技術(shù)[J].軟件導(dǎo)刊，2013（12）.

[3] 馬婧.巨頭_HTML5命運(yùn)的裁定者[J].互聯(lián)網(wǎng)周刊，2013（9）.