摘 要 電子商務(wù)行業(yè)的迅猛發(fā)展，使得各種電商系統(tǒng)如雨后春筍般出現(xiàn)，隨著各種移動終端在電商環(huán)境中投入應(yīng)用，各種規(guī)模的電商系統(tǒng)移動端的開發(fā)是目前的熱門話題。筆者通過實際開發(fā)經(jīng)驗，針對中小規(guī)模電商系統(tǒng)移動端應(yīng)用開發(fā)框架提出一套解決方案。

【關(guān)鍵詞】中小規(guī)模電商系統(tǒng) 移動終端 開發(fā)框架

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

1 中小規(guī)模電商系統(tǒng)移動應(yīng)用面對的主要問題

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

1.1 主流移動應(yīng)用平臺

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

1.2 移動終端分辨率統(tǒng)一度低

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

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年的統(tǒng)計，結(jié)果如圖1。

可見，安卓平臺的分辨率更加不統(tǒng)一。

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

1.3 原生開發(fā)語言不統(tǒng)一

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

1.4 用戶對界面要求高

對于移動應(yīng)用，尤其是電商系統(tǒng)的移動應(yīng)用，系統(tǒng)界面同城需要滿足以下設(shè)計要求，才能滿足用戶對系統(tǒng)界面操作的要求：

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

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

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

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

（5）過渡自然：系統(tǒng)界面優(yōu)雅，過渡自然能很好的增加用戶的粘性。

2 應(yīng)用開發(fā)框架解決方案

2.1 系統(tǒng)的整體框架如圖2

（1）其中服務(wù)器集群主要解決客戶端無法保存的數(shù)據(jù)和資源，以及動態(tài)資源。

（2）同時，服務(wù)器集群需要實現(xiàn)所有的業(yè)務(wù)請求。

（3）服務(wù)器集群和移動應(yīng)用之間需要通過有效的手段保證數(shù)據(jù)的有效性和安全性。

2.2 前端開發(fā)方案

鑒于移動應(yīng)用的以上特點，我們使用HTML5加原生應(yīng)用混合框架，在提供靈活快捷的開發(fā)框架的同時，保障業(yè)務(wù)代碼的統(tǒng)一性。

其中HTML5部分實現(xiàn)絕大部分易變的功能和需要從網(wǎng)絡(luò)動態(tài)下載內(nèi)容的功能。HTML5已經(jīng)提供大量的交互功能，足以支撐絕大部分企業(yè)應(yīng)用。

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

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

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

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

2.3 關(guān)鍵技術(shù)代碼分析

Android使用WebView顯示網(wǎng)頁。

WebView可以使得網(wǎng)頁輕松的內(nèi)嵌到app里，還可以直接跟js相互調(diào)用。

webview有兩個方法：setWebChromeClient和 setWebClient。

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

setWebChromeClient：輔助WebView處理Javascript的對話框，網(wǎng)站圖標(biāo)，網(wǎng)站title，加載進度等 。

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

2.3.1 如何使用

在AndroidManifest.xml設(shè)置訪問網(wǎng)絡(luò)權(quán)限：

控件：

android：layout_width="match_parent"

android：layout_height="match_parent"

android：id="@+id/webView"

/>

example.html 存放在assets文件夾內(nèi)

調(diào)用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和原生應(yīng)用間互相調(diào)用

IOS使用UIWebView顯示網(wǎng)頁

（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]；//創(chuàng)建URL

NSURLRequest* request = [NSURLRequest requestWithURL：url]；//創(chuàng)建NSURLRequest

[webView loadRequest：request]；//加載

加載web資源：

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

NSURLRequest* request = [NSURLRequest requestWithURL：url]；//創(chuàng)建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 安卓端兼容性問題

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

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

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

3.2 特效問題

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

作者簡介

馬海慶，（1977-），男，廣東省廣寧縣人?，F(xiàn)為廣州市財經(jīng)職業(yè)學(xué)校實驗師。研究方向為計算機科學(xué)。

作者單位

廣州市財經(jīng)職業(yè)學(xué)校 廣東省廣州市 510095