基于HTML5 web 技術APP快速開發研究

李世滿

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

關鍵詞：HTML5 web技術 APP開發 HTML5發展

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2016）03-0081-02

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

1 APP與Web app的發展

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

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

在App大力發展的今天，人們已不再質疑App可以帶來的收益，互聯網+時代的到來，App 讓每個人的生活更輕松、更便捷了，APP開發也隨之讓每個企業都開啟了移動信息化的進程。

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

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

2 基于HTML5web技術APP快速開發現狀

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

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

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

3 以移動辦公APP軟件開發為藍本的HTML5web技術應用：“云端”APP辦公軟件開發

“云端”應用軟件是由深圳技師學院學生自主開發的手機應用軟件，主要應用于用戶云端文件保存與分享。 “云端”應用軟件的目標是“高質量的文件社交體驗”，根據這一目標和應用軟件的使用范圍，讓中國所有的高校學生和企事業單位都使用的“云端”的目標也就不難實現。“云端”各功能通過ajax使前后臺數據交互。前端使用H5+CSS3+JS編寫，本地端使用java編寫，服務端使用ajax+PHP+.Net+NodeJS編寫。各端間相互聯通。具體邏輯判斷如圖所示。

作品功能與原型設計：

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

作品實現、難點及特色分析：

軟件實現：軟件使用html5+css3+JavaScript+java+ajax+PHP+.Net+NodeJS等語言實現。

軟件難點：web與本機關聯相互調用；云端文件數據庫取數；文件目錄結構分析；用戶信息保存與設置；用戶即使在線交流；各類文件查看

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

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

4 HTML5發展趨勢

HTML 5從根本上改變了開發商開發Web應用的方式，從桌面瀏覽器到移動應用，這種語言和標準都正在影響并將繼續影響著各種操作平臺。

參考文獻：

[1] 物聯中國網[EB/OL].www.50cnnet.com.

[2] 王慶.基于HTML5的移動Web技術[J].軟件導刊，2013（12）.

[3] 馬婧.巨頭_HTML5命運的裁定者[J].互聯網周刊，2013（9）.