基于移動端的應用程序前端開發

李琳

摘要：該文簡單介紹了基于移動端的應用程序前端開發現狀，闡述了移動前端的良好發展態勢，對比了基于移動端的前端開發與Web前端開發的區別，介紹了幾種常見的移動前端開發框架，開發人員在實際工作中要不斷完善和優化移動前端開發技術，保證基于移動端的應用程序前端開發能夠高效運行，并期望移動前端開發向自動化、智能化發展。

關鍵詞：移動前端開發;前端開發框架;前端開發技術

中圖分類號：TP311 文獻標識碼：A

文章編號：1009-3044（2020）14-0097-02

1基于移動端的應用程序前端開發現狀

自從互聯網進入了Web2.0時代，大量的Web應用涌入了人們的視野，頁面也變得更加美觀、生動，與用戶的交互也極大地增強了其使用體驗。隨著HTML5、CSS3、JavaScript以及各種框架技術的應用，人們越來越重視頁面的形象設計和交互性設計，并將前端開發從軟件開發中逐漸剝離出來。而移動互聯網的興起以及其帶來的大量高性能的移動終端設備以及快速的無線網絡，讓移動端應用程序前端開發的前景十分廣闊，許多開發人員紛紛投入到移動端應用程序的前端開發中。

在傳統的移動端開發過程中，要先確定需求和產品、設計uI，然后再進行架構設計，并進行數據庫、接口和前端開發，經過測試后進行產品運營，這種流程下的移動端應用程序千篇一律，前后端界限不明確，難以滿足用戶越來越精細的用戶體驗需求?，F在越來越多的企業采用雙層架構模式進行移動端應用程序開發，即前端工程師開發H5、Android或IOS頁面，后端工程師設計數據庫，開發接口、后臺，管理服務器或后端云平臺，將前后端有效的區分開來，讓專業的人做專業的事情，不僅可以提高效率，還可以更好地滿足用戶的個性化需求。

2基于移動端的應用程序前端開發與Web前端開發的區別

2.1應用場景不同

基于移動端的應用程序前端頁面是面向手機、平板電腦等移動設備的，頁面小巧、使用靈活，但是要求頁面要能夠充分適應各種屏幕尺寸的手機并進行最大程度的利用，因此主要適用于瀏覽多、操作簡捷的應用程序;而Web前端頁面主要面向臺式機、PC機等設備，頁面較大、觀看更舒適，適用于需要大量操作的應用程序和用戶。

2.2應用頁面性能不同

移動端設備連接的網絡與Web前端相比較為復雜，Web端主要是通過網線連接網絡，穩定性強，而移動端接入的是無線網絡，如Wi-Fi、4G等，如果遇到網絡不穩定的情況，還會在不同網絡中進行切換，對頁面性能無疑是一個巨大的挑戰，這就要求移動端的頁面資源不能過大，否則在惡劣網絡情況下時，頁面將會無法訪問，嚴重影響用戶體驗。

2.3技術框架使用不同

由于在移動端主要以webkit內核為主，對HTML5、CSS3等新技術支持的更好，所以可以更大范圍地使用新技術;而Web端由于要兼容不同版本的瀏覽器，在一些情況下限制了其對新技術的使用。此外，在移動端頁面框架的選擇方面，由于移動端網絡情況不穩定，一般只考慮體積小而功能強大的框架，能滿足一般業務的需要;而Web端相對選擇的范圍比較大，可以根據項目的實際需求加以考慮，不必因為顧慮體積問題而降低其功能性。

3常見的基于移動端的應用程序前端開發框架

基于移動端的應用程序隨著移動終端智能化的發展而受到越來越多人的關注，相較于Web端，它的運行更快、隨時隨地，而且有更好的用戶體驗。隨著前端開發技術的不斷發展，移動前端開發框架也在不斷更新、完善，前端開發人員可以通過選擇合適、高質量的移動框架來滿足不同應用程序的性能需求。下面介紹幾種常見的基于移動端的應用程序前端開發框架。

3.1 jQuery Mobile框架

iQuery Mobile是iQuery主要面向移動端Web程序前端開發的框架，能夠幫助開發人員快速開發出支持多種移動設備的Mobile應用用戶界面。jQueryMobile繼承了jQuery的優勢，給主流移動平臺帶來了功能強大的ljQuery核心庫，并且給主流平臺提供了豐富的適合移動端Web應用的uI組件，還有很多的第三方擴展，幾乎適用于所有流行的智能手機和平板電腦。

iQuery Mobile使用HTML5和CSS3通過盡可能少的腳本來對頁面進行布局，其最新版本是1.4.0，主要側重于在性能和控件方面的改進。除了全新的默認主題和SVG圖標，還新增了開關控件、通用過濾器、箭頭彈出框、滑動提示框等一系列功能，更是集成了jQueryuI的Tab部件，給開發人員帶來了極大的便利。

3.2 Sencha Touch框架

Sencha Touch框架是最早的基于HTML5的移動端Web程序框架，它提倡組件化編程，是面向對象技術的發展延伸，類的概念仍然是Sencha Touch框架中的一個基礎概念，但其更核心的概念是接口。Sencha Touch框架包含的豐富的用戶界面組件和數據管理全部都是基于最新的HTML 5和CSS3的Web標準，能夠全面兼容Android和iOS設備。

3.3阿里系的KISSY框架

KISSY是由阿里巴巴集團的前端工程師們發起創建的一個開源JavaScript框架。它具有跨終端、模塊化、高擴展性、組件齊全和使用簡單等優點。除了完備的工具集合諸如DOM、Event、Ajax、Anim等，KISSY還面向團隊協作做了獨特設計，提供了經典的面向對象、動態加載、性能優化等解決方案。作為一款全終端支持的JavaScript框架，KISSY為移動終端做了大量適配和優化，應用場景十分廣泛。KISSY Mobile是一套面向移動端的功能特性集合，能夠實現靈活配置的轉場動畫和View的解耦。目前KISSY 5.0已經全面支持移動端。

3.4騰訊系的Frozen UI框架

Frozen uI框架是騰訊的社交用戶體驗設計團隊根據最新的手機QQ設計規范制作的移動端Web框架，是一套基于移動端的uI庫。Frozen uI框架非常輕量、精美，提供了包含表單、對話框、列表、CSS基礎樣式、JavaScript基礎組件和一些動畫效果的庫。此外，FrozenUI還可以提供文字截斷、lpx邊框、rem、兩端留白等常用場景的解決方案。

4小結

綜上所述，基于移動端的前端開發無論從應用場景還是框架技術上，都區別于傳統的Web前端開發，相信隨著IT技術的不斷發展，前端技術的不斷更新，必將給移動端應用程序前端開發帶來新的前景與機會，催生新的產業鏈條，打破固有開發模式，顛覆人們的工作和生活習慣，給用戶帶來全新的體驗。