中小規(guī)模電商系統(tǒng)移動(dòng)端應(yīng)用開發(fā)框架研究

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

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

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

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

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

1.1 主流移動(dòng)應(yīng)用平臺(tái)

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

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

對(duì)于相對(duì)比較統(tǒng)一的iOS平臺(tái)，系統(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。

而對(duì)于相對(duì)分散的Android平臺(tái)，則分辨率分布更加混亂，截止2014年的統(tǒng)計(jì)，結(jié)果如圖1。

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

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

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

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

1.4 用戶對(duì)界面要求高

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

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

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

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

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

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

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

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

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

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

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

2.2 前端開發(fā)方案

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

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

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

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

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

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

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

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

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

webview有兩個(gè)方法：setWebChromeClient和 setWebClient。

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

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

WebViewClient就是幫助WebView處理各種通知、請(qǐng)求事件的。

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)，對(duì)很多基于HTML5的應(yīng)用在性能上存在問題，且多個(gè)版本的自帶瀏覽器引起可能在HTML5實(shí)現(xiàn)略有差別。

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

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

3.2 特效問題

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

作者簡(jiǎn)介

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

作者單位

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