中小規模電商系統移動端應用開發框架研究

摘 要 電子商務行業的迅猛發展，使得各種電商系統如雨后春筍般出現，隨著各種移動終端在電商環境中投入應用，各種規模的電商系統移動端的開發是目前的熱門話題。筆者通過實際開發經驗，針對中小規模電商系統移動端應用開發框架提出一套解決方案。

【關鍵詞】中小規模電商系統 移動終端 開發框架

目前移動應用的開發主要面對IOS以及Android兩大平臺，而這兩大平臺各有各的特點，導致同一個系統地應用在開發的過程需要根據實際情況進行調整，以適應這兩個平臺。本文針對中小規模電商系統在IOS以及Android兩大平臺開發的框架提出了一套解決方案。

1 中小規模電商系統移動應用面對的主要問題

中小規模電商系統移動終端在電商用戶交易系統中占據了舉足輕重的位置，實際上絕大多數已經在移動終端完成。然而，移動終端應用的開發難度卻比PC終端的難度要大。這些難度集中于移動應用存在以下特點：

1.1 主流移動應用平臺

由于現在的移動終端平臺絕大部分都被iOS和Android平臺占據，我們在這里主要討論這兩個平臺的應用開發情況。而實際上，現在的大多數移動應用也逐漸只支持這兩大平臺。

1.2 移動終端分辨率統一度低

對于相對比較統一的iOS平臺，系統分辨率分布情況為：

1.2.1 iPhone/iPod Touch

（1）普通屏 320像素 x 480像素 iPhone 1、3G、3GS，iPod Touch 1、2、3；

（2）3：2 Retina 屏 640像素 x 960像素 iPhone 4、4S，iPod Touch 4；

（3）16：9 Retina 屏 640像素 x 1136像素 iPhone 5，iPod Touch 5。

1.2.2 iPad

（1）普通屏 768像素 x 1024像素 iPad 1， iPad2，iPad mini；

（2）Retina屏 1536像素 x 2048像素 New iPad，iPad 4。

而對于相對分散的Android平臺，則分辨率分布更加混亂，截止2014年的統計，結果如圖1。

可見，安卓平臺的分辨率更加不統一。

不過從2015年來，各路Android手機廠家逐漸把主流的手機屏幕設置為1920x1080的全高清屏分辨率。這也可以基本確定主流的用戶為使用1920x1080分辨率的用戶。

1.3 原生開發語言不統一

對于iOS平臺，其原生開發語言為Objective-C，以及最新流行起來的Swift；而Android平臺的原生開發語言為Java。無論從開發語言，開發IDE，各種軟件庫來說，兩種移動應用的支撐平臺都沒有任何交集，因此，對于應用開發廠商來說，為了支撐兩大平臺的原生應用開發，軟件廠商必須有大量兩大平臺的熟練開發人員，并且在系統設計的時候，需要考慮到兩大系統的開發特點做設計。

1.4 用戶對界面要求高

對于移動應用，尤其是電商系統的移動應用，系統界面同城需要滿足以下設計要求，才能滿足用戶對系統界面操作的要求：

（1）界面簡潔：簡潔的界面有助于讓用戶輕松找到自己需要的或者關注的東西，甚至可以說，簡潔的界面，決定了用戶是不是會繼續使用這個軟件。

（2）能吸引用戶注意力：界面要求有重點，有主題，沒有重點的界面，容易引起用戶思路的混亂。

（3）操作方式良好：移動終端的操作方式主要集中于點擊、拖拽、縮放功能，以及之后延伸出來的手指指令。

（4）主題專注：一個應用應該有它的專注點，對于電商應用，主要集中于商品篩選、銷售流程、訂單查詢等功能。

（5）過渡自然：系統界面優雅，過渡自然能很好的增加用戶的粘性。

2 應用開發框架解決方案

2.1 系統的整體框架如圖2

（1）其中服務器集群主要解決客戶端無法保存的數據和資源，以及動態資源。

（2）同時，服務器集群需要實現所有的業務請求。

（3）服務器集群和移動應用之間需要通過有效的手段保證數據的有效性和安全性。

2.2 前端開發方案

鑒于移動應用的以上特點，我們使用HTML5加原生應用混合框架，在提供靈活快捷的開發框架的同時，保障業務代碼的統一性。

其中HTML5部分實現絕大部分易變的功能和需要從網絡動態下載內容的功能。HTML5已經提供大量的交互功能，足以支撐絕大部分企業應用。

而原生部分主要完成以下功能：

（1）本地數據存儲和緩存：在必要情況下，不使用瀏覽器框架部分的存儲。

（2）通信安全：可以使用https或者其他更高效或者符合業務要求的通信方式。

（3）定制算法：原生應用提供定制的算法給HTML5部分調用，簡化HTML5對底層編程和性能的需求。

2.3 關鍵技術代碼分析

Android使用WebView顯示網頁。

WebView可以使得網頁輕松的內嵌到app里，還可以直接跟js相互調用。

webview有兩個方法：setWebChromeClient和 setWebClient。

setWebClient：主要處理解析，渲染網頁等瀏覽器做的事情。

setWebChromeClient：輔助WebView處理Javascript的對話框，網站圖標，網站title，加載進度等 。

WebViewClient就是幫助WebView處理各種通知、請求事件的。

2.3.1 如何使用

在AndroidManifest.xml設置訪問網絡權限：

控件：

android：layout_width="match_parent"

android：layout_height="match_parent"

android：id="@+id/webView"

/>

example.html 存放在assets文件夾內

調用WebView的loadUrl（）方法，

加載本地資源

webView = （WebView） findViewById（R.id.webView）；

webView.loadUrl（"file：///android_asset/example.html"）；

加載web資源：

webView = （WebView） findViewById（R.id.webView）；

webView.loadUrl（"http：//baidu.com"）；

2.3.2 訪問的頁面如何啟用Javascript

WebSettings settings = webView.getSettings（）；

settings.setJavaScriptEnabled（true）；

2.3.3 配置緩存

webView.getSettings（）.setCacheMode（WebSettings.LOAD_CACHE_ELSE_NETWORK）；

2.3.4 HTML5和原生應用間互相調用

IOS使用UIWebView顯示網頁

（1）如何使用

CGRect bouds = [[UIScreen manScreen]applicationFrame]；

UIWebView* webView = [[UIWebView alloc]initWithFrame：bounds]；

webView.scalespageToFit = YES；

webView.detectsPhoneNumbers = YES；

[self.view addSubview：webView]；

加載本地資源：

NSURL* url = [NSURL fileURLWithPath：filePath]；//創建URL

NSURLRequest* request = [NSURLRequest requestWithURL：url]；//創建NSURLRequest

[webView loadRequest：request]；//加載

加載web資源：

NSURL* url = [NSURL URLWithString：@"http：//www.youku.com"]；//創建URL

NSURLRequest* request = [NSURLRequest requestWithURL：url]；//創建NSURLRequest

[webView loadRequest：request]；//加載

（2）如何使用Javascript

- （void）webViewDidFinishLoad：（UIWebView *）webView {

NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString：@"document.location.href"]；

}

（3）如何保持session

NSURL *lastURL = [[self.webView request] mainDocumentURL]；

if （lastURL.absoluteString == NULL） {

lastURL = [NSURL URLWithString：@"http：//mydomain.com/"]；

}

NSArray *cookiesForDomain = [[NSHTTPCookieStorage sharedHTTPCookieStorage] cookiesForURL：[NSURL URLWithString：@"http：//mydomain.com"]]；

NSMutableURLRequest *newRequest = [NSMutableURLRequest requestWithURL：lastURL]；

for （NSHTTPCookie *cookie in cookiesForDomain） {

NSString *cookieString = [NSString stringWithFormat：@"%@=%@"， [cookie name]， [cookie value]]；

[newRequest setValue：cookieString forHTTPHeaderField：@"Cookie"]；

NSLog（@"inserted cookie into request： %@"， cookie）；

}

[self.webView loadRequest：newRequest]；

3 存在的一些問題及解決方案

3.1 安卓端兼容性問題

由于現存市面上的安卓版本比較分散，絕大部分為3.0到5.0之間的版本。在安卓4.4以前版本自帶的瀏覽器引擎性能不優，對很多基于HTML5的應用在性能上存在問題，且多個版本的自帶瀏覽器引起可能在HTML5實現略有差別。

解決問題的方法為不使用內置的瀏覽器引擎，而是使用第三方編譯的瀏覽器組件，提升性能的同時，解決版本之間的兼容性問題。

我們在這里的方案中，使用Crosswalk組件替換安卓自帶的瀏覽器組件，在代碼部分只需要對原生部分的代碼做少量調整，主要是將WebView替換為XWalkView，并調整少量相關的調用函數即可完成。但在引入第三方瀏覽器組件的時候，帶來的問題就是應用包會增大約15M。

3.2 特效問題

由于沒有使用原生的編程語言，在部分特效上使用HTML5無法實現或者難以實現。但對于電商系統，對特效的要求并不強烈，可以犧牲部分特效換取開發效率和維護成本。對于確實需要特效的地方，可以通過HTML5的js反過來調用原生代碼的方式實現，不過實現成本略高。

作者簡介

馬海慶，（1977-），男，廣東省廣寧縣人。現為廣州市財經職業學校實驗師。研究方向為計算機科學。

作者單位

廣州市財經職業學校 廣東省廣州市 510095