中小规模电商系统移动端应用开发框架研究

摘 要 电子商务行业的迅猛发展，使得各种电商系统如雨后春笋般出现，随着各种移动终端在电商环境中投入应用，各种规模的电商系统移动端的开发是目前的热门话题。笔者通过实际开发经验，针对中小规模电商系统移动端应用开发框架提出一套解决方案。

【关键词】中小规模电商系统 移动终端 开发框架

目前移动应用的开发主要面对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